0

Como eu alinho essas imagens ao centro? Eu tentei usar a <div class="text-align">, mas não funcionou

<code>
<section id="team">
<div class = "text-align"
      <div class="container">
        <div class="section-header wow fadeInUp">
          <h3>Team</h3>
          <p>Conheça nosso time</p>
        </div>

        <div class="row">
    <div class="col-lg-2 col-md-6 wow fadeInUp">
        <div class="member">
      <img src="img/team-1.jpg" class="img-fluid" alt="">
        <div class="member-info">
                      <div class="member-info-content">
                        <h4>Nome1</h4>
                          <span>Diretora de Marketing</span>
                          <div class="social">
                              <a href=""><i class="fa fa-twitter"></i></a>
                              <a href=""><i class="fa fa-facebook"></i></a>
                              <a href=""><i class="fa fa-google-plus"></i></a>
                              <a href=""><i class="fa fa-linkedin"></i></a>
                </div>
           </div>
         </div>
               </div>
    </div>

    <div class="col-lg-2 col-md-6 wow fadeInUp">
        <div class="member">
      <img src="img/team-2.jpg" class="img-fluid" alt="">
        <div class="member-info">
                      <div class="member-info-content">
                        <h4>Nome2</h4>
                          <span>Diretor Jurídico</span>
                          <div class="social">
                              <a href=""><i class="fa fa-twitter"></i></a>
                              <a href=""><i class="fa fa-facebook"></i></a>
                              <a href=""><i class="fa fa-google-plus"></i></a>
                              <a href=""><i class="fa fa-linkedin"></i></a>
                </div>
           </div>
         </div>
               </div>
    </div>

    <div class="col-lg-2 col-md-6 wow fadeInUp">
        <div class="member">
      <img src="img/team-3.jpg" class="img-fluid" alt="">
        <div class="member-info">
                      <div class="member-info-content">
                        <h4>Nome3</h4>
                          <span>Diretora de Tecnologia</span>
                          <div class="social">
                              <a href=""><i class="fa fa-twitter"></i></a>
                              <a href=""><i class="fa fa-facebook"></i></a>
                              <a href=""><i class="fa fa-google-plus"></i></a>
                              <a href=""><i class="fa fa-linkedin"></i></a>
                </div>
           </div>
         </div>
               </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-2 col-md-6 wow fadeInUp">
        <div class="member">
      <img src="img/team-4.jpg" class="img-fluid" alt="">
        <div class="member-info">
                      <div class="member-info-content">
                        <h4>Nome4</h4>
                          <span>Diretor Administrativo</span>
                          <div class="social">
                              <a href=""><i class="fa fa-twitter"></i></a>
                              <a href=""><i class="fa fa-facebook"></i></a>
                              <a href=""><i class="fa fa-google-plus"></i></a>
                              <a href=""><i class="fa fa-linkedin"></i></a>
                </div>
           </div>
         </div>
               </div>
    </div>

    <div class="col-lg-2 col-md-6 wow fadeInUp">
        <div class="member">
        <img src="img/team-5.jpg" class="img-fluid" alt="">
        <div class="member-info">
                      <div class="member-info-content">
                        <h4>Nome5</h4>
                          <span>Diretor de Comunicação</span>
                          <div class="social">
                              <a href=""><i class="fa fa-twitter"></i></a>
                              <a href=""><i class="fa fa-facebook"></i></a>
                              <a href=""><i class="fa fa-google-plus"></i></a>
                              <a href=""><i class="fa fa-linkedin"></i></a>
                          </div>
                      </div>
         </div>
        </div>
    </div>
</div>
  </div>
</section>
</code>
1
  • Usando bootstrap você pode adicionar text-center na sua div que ele centraliza o conteúdo dela, isto resolve 90% dos casos. 27/09/2019 às 16:56

6 Respostas 6

2

Vc esta usando Bootstrap pelo visto, e suas imagens estão dentro de divs com classe col-, como a Row em que as col- estão dentro têm display:flex basta vc adicionar nessas Row a class nativa justify-content-center ficando tipo <div class="row justify-content-center"> Eu coloquei uma borda nas col- apenas para vc ver que está alinhando direitinho no container. Depois vc remove esse CSS

inserir a descrição da imagem aqui

Segue código da imagem acima:

div[class^="col-"] {
    border: 1px solid #000;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<section id="team">
    <div class="container">
        <div class="section-header wow fadeInUp">
            <h3>Team</h3>
            <p>Conheça nosso time</p>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-2 col-md-6 wow fadeInUp">
                <div class="member">
                    <img src="img/team-1.jpg" class="img-fluid" alt="">
                    <div class="member-info">
                        <div class="member-info-content">
                            <h4>Nome1</h4>
                            <span>Diretora de Marketing</span>
                            <div class="social">
                                <a href=""><i class="fa fa-twitter"></i></a>
                                <a href=""><i class="fa fa-facebook"></i></a>
                                <a href=""><i class="fa fa-google-plus"></i></a>
                                <a href=""><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-6 wow fadeInUp">
                <div class="member">
                    <img src="img/team-2.jpg" class="img-fluid" alt="">
                    <div class="member-info">
                        <div class="member-info-content">
                            <h4>Nome2</h4>
                            <span>Diretor Jurídico</span>
                            <div class="social">
                                <a href=""><i class="fa fa-twitter"></i></a>
                                <a href=""><i class="fa fa-facebook"></i></a>
                                <a href=""><i class="fa fa-google-plus"></i></a>
                                <a href=""><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-6 wow fadeInUp">
                <div class="member">
                    <img src="img/team-3.jpg" class="img-fluid" alt="">
                    <div class="member-info">
                        <div class="member-info-content">
                            <h4>Nome3</h4>
                            <span>Diretora de Tecnologia</span>
                            <div class="social">
                                <a href=""><i class="fa fa-twitter"></i></a>
                                <a href=""><i class="fa fa-facebook"></i></a>
                                <a href=""><i class="fa fa-google-plus"></i></a>
                                <a href=""><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-2 col-md-6 wow fadeInUp">
                <div class="member">
                    <img src="img/team-4.jpg" class="img-fluid" alt="">
                    <div class="member-info">
                        <div class="member-info-content">
                            <h4>Nome4</h4>
                            <span>Diretor Administrativo</span>
                            <div class="social">
                                <a href=""><i class="fa fa-twitter"></i></a>
                                <a href=""><i class="fa fa-facebook"></i></a>
                                <a href=""><i class="fa fa-google-plus"></i></a>
                                <a href=""><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-2 col-md-6 wow fadeInUp">
                <div class="member">
                    <img src="img/team-5.jpg" class="img-fluid" alt="">
                    <div class="member-info">
                        <div class="member-info-content">
                            <h4>Nome5</h4>
                            <span>Diretor de Comunicação</span>
                            <div class="social">
                                <a href=""><i class="fa fa-twitter"></i></a>
                                <a href=""><i class="fa fa-facebook"></i></a>
                                <a href=""><i class="fa fa-google-plus"></i></a>
                                <a href=""><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

-2

Crie essa classe no css:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

E inclua na sua imagem:

<img src="img/team-2.jpg" class="center" alt="">
-2

Para centralizar uma imagem pelo CSS, basta inserir ao código a seguinte formatação:

margin: center; 

Assim sua imagem estará centralizada.

1
  • margin: center; essa eu não conhecia, isso funcionou ai para vc? 2/10/2019 às 12:58
-2

Use esse código no seu arquivo css:

img{
  margin: auto;
}
1
  • No StackOverflow é legal testar a coisas antes de responder. Pega o código da pergunta e testa para ver se seu css resolve 2/10/2019 às 12:58
-2

basta colocar

margin: auto;

isso irá centralizar a div, contanto que a imagem esteja dentro de uma div

1
  • Hey, sempre que puder, de um exemplo mais detalhado mostrando como pode ser feito e onde deve ser modificado! Assim deixa mais claro para todos. 2/10/2019 às 11:13
-2

Insira no css a formatação para a tag img. Dentro da formatação atribua a formatação margin: auto. Desse modo o seu código deverá ter a seguinte configuração:

    img{
  margin: auto;
}
1
  • No StackOverflow é legal testar a coisas antes de responder. Pega o código da pergunta e testa para ver se seu css resolve 2/10/2019 às 12:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .