Ir ao conteúdo
  • Cadastre-se

CSS CSS Alinhar elemento na Esquerda!


Ir à solução Resolvido por Adriano_web,

Posts recomendados

Ola, estou com um problema de alinhamento, pois não consigo alinhar um elemento para ele ficar fixo na esquerda da sua div, já utilizei "flex-end" e tbem não foi, alguém sabe como faço? 

 

Gostaria de alinhar o bloco dos Icones no lado esquerdo.

 

apaga25.png.852e3a3e93d584c92db12f83c76de285.png

 

<div class="main-content-title row">
        <div style="background-color: #e0f2f1;
    padding: 1em;"><img src="~/images/SSP.png" width="70" /></div>
        <div style="display:flex;flex-wrap:wrap; margin-left: 1.3em;">
            <h2 class="styleTitulo">Bem vindo:</h2>&nbsp;&nbsp;<span class="material-icons" style="padding-top: 1.3em;font-size: 2em;">person</span><h3 class="styleUsuario">@ViewBag.usuarioLogado</h3>
        </div>
        <div class="">
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-default" type="button"><i class="material-icons pmd-sm">add</i></button>
           
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">star</i></button>
            
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-info" type="button"><i class="material-icons pmd-sm">info</i></button>
            
            <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-success" type="button"><i class="material-icons pmd-sm">check</i></button>
        </div>
    </div>

 

.main-content-title {
        background-color: #fff;
        /*padding: 1em;*/
        display: flex;
    }

.styleTitulo {
        margin: 0;
        font-size: 3em;
        text-shadow: 1px 1px 10px rgba(130, 130, 130, 0.5);
        font-family: 'Roboto', sans-serif;
        padding-top: 0.5em;
    }
    .styleUsuario {
        margin: 0;
        font-size: 1.6em;
        text-shadow: 1px 1px 10px rgba(130, 130, 130, 0.5);
        padding-top: 1.7em;
        margin-left: 0.3em;
    }

 

Link para o comentário
Compartilhar em outros sites

  • Solução

Olá @Mizrain Phelipe Sá boa tarde, tudo bem? Pode usar o justify-content: space-between no elemento com a classe .main-content-title deixando as divs de logo e titulos num <div> próprio, assim:

 

<div class="main-content-title row">
  <div>
    <div style="background-color:#e0f2f1;padding:1em"><img src="~/images/SSP.png" width="70" /></div>
    <div style="display:flex;flex-wrap:wrap; margin-left: 1.3em;">
      <h2 class="styleTitulo">Bem vindo:</h2>&nbsp;&nbsp;
      <span class="material-icons" style="padding-top: 1.3em;font-size: 2em;">person</span>
      <h3 class="styleUsuario">@ViewBag.usuarioLogado</h3>
    </div>
  </div>
  
  <div class="">
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-default" type="button"><i class="material-icons pmd-sm">add</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">star</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-info" type="button"><i class="material-icons pmd-sm">info</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-success" type="button"><i class="material-icons pmd-sm">check</i></button>
  </div>
</div>

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@Adriano_web Funciono perfeitamente, obrigado!

4 horas atrás, Adriano_web disse:

Olá @Mizrain Phelipe Sá boa tarde, tudo bem? Pode usar o justify-content: space-between no elemento com a classe .main-content-title deixando as divs de logo e titulos num <div> próprio, assim:

 



<div class="main-content-title row">
  <div>
    <div style="background-color:#e0f2f1;padding:1em"><img src="~/images/SSP.png" width="70" /></div>
    <div style="display:flex;flex-wrap:wrap; margin-left: 1.3em;">
      <h2 class="styleTitulo">Bem vindo:</h2>&nbsp;&nbsp;
      <span class="material-icons" style="padding-top: 1.3em;font-size: 2em;">person</span>
      <h3 class="styleUsuario">@ViewBag.usuarioLogado</h3>
    </div>
  </div>
  
  <div class="">
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-default" type="button"><i class="material-icons pmd-sm">add</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">star</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-info" type="button"><i class="material-icons pmd-sm">info</i></button>
    <button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-success" type="button"><i class="material-icons pmd-sm">check</i></button>
  </div>
</div>

 

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...