Align images to the center

Question

Align images to the center

Asked 5 years, 2 months ago

Viewed 304 times

0

How do I line up these images at the center? I tried to use the <div class="text-align">, but it didn’t work

<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>

Using bootstrap you can add text-center in your div that it centralizes her content, this solves 90% of cases.

– Leonardo Getulio

2019/09/27 at 16:56

6 answers

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-09-27T17:03:13+00:00

You are using Bootstrap by the look of it, and your images are inside divs classy col-, as the Row in which the col- are inside have display:flex just you add in these Row the native class justify-content-center getting kind <div class="row justify-content-center"> I put an edge on the col- just so you can see you’re lining up right on the container. After you remove this CSS

Follow the image code above:

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>

by Luiz Gustavo • 7 points · Answer 2 · 2019-10-01T22:23:30+00:00

-2

To center an image by CSS, simply insert the following formatting into the code:

margin: center;

So your image will be centered.

margin: center; That I didn’t know, that worked out for you?

– Caetano Sincero

2019/10/02 at 12:58

by Guilherme Martin • **199** points · Answer 3 · 2019-09-27T16:57:11+00:00

Create this class in css:

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

And include in your image:

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

by luua • 1 point · Answer 4 · 2019-10-02T10:54:34+00:00

-2

Use this code in your css file:

img{
  margin: auto;
}

Stackoverflow is fun to test things before you answer. Take the question code and test to see if your css solves

– Caetano Sincero

2019/10/02 at 12:58

by 021tls • 1 point · Answer 5 · 2019-10-02T11:02:24+00:00

-2

just put

margin: auto;

this will center the div, as long as the image is inside a div

Hey, whenever you can, a more detailed example showing how it can be done and where it should be modified! So make it clearer for everyone.

– Matheus Ribeiro

2019/10/02 at 11:13

by Monteiro • 1 point · Answer 6 · 2019-10-02T11:18:11+00:00

Insert the formatting for the img tag into the css. Within the formatting assign the margin: auto formatting. So your code should have the following configuration:

    img{
  margin: auto;
}