3 Images Centered In A Row

February 02, 2023 Post a Comment

I am trying to have three images centered in a row and then centered on the page. I've got them all in a row but I cannot get them centered. Any suggestions on getting my group to

Solution 1:

What I would recommend is to make use of flexbox container for the elements.

With flexbox, all you need is three different styles in order to centralise elements both horizontally and vertically:

Note that you'll also need to set a height on the container, so that the elements can actually fill the vertical space.

This can be seen in the following, with a border added to showcase the area that the .container element occupies:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border: 1px solid black;
}

.social {
  position: relative;
  display: inline-block;
  float: left;
  padding: 10px;
}

<div class="container">
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
  </div>
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
  </div>
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
  </div>
</div>

Hope this helps! :)

Solution 2:

html

<div class="content">
    <div>
        <img src="facebook.png" alt="" width="75" height="75"/>
    </div>

    <div>
        <img src="twitter.png" alt="" width="75" height="75"/>
    </div>

    <div>
        <img src="instagram.png" alt="" width="75" height="75" />
    </div>
</div>

css

.content { 
    text-align:center; 
}

Solution 3:

Maybe you can edit the css file, remove the float:left; :

Baca Juga

.contain {
     max-width:960px;
     text-align:center;
  }

 .social {
 position:relative;
 display: inline-block;
 padding: 10px;
 }

<div align="center">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" 
alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>

Solution 4:

Using flex is a great solution, but here's a solution that uses what you already have. By removing float: left from your existing code we can get the desired result.

.contain {
  max-width: 960px;
  text-align: center;
}

.social {
  display: inline-block;
  padding: 10px;
}

<div class="contain">
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
  </div>
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
  </div>
  <div align="center;" class="social">
    <img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
  </div>
</div>

Solution 5:

Keeping your current code, simply remove the flex: left: (JSFiddle example):

.contain {
  max-width: 960px;
  text-align: center;
}

.social {
  position: relative;
  display: inline-block;
  padding: 10px;
}

If based on your browser compatibility requirements you can afford to use display: flex; (MDN) then that's the easiest way (jsfiddle example):

.contain {
  display: flex;
  justify-content: center;
}

.social {
  padding: 10px;
}

There's an excellent flexbox tutorial here: flexbox froggy. Floats are pretty strange and I personally find flexes much more intuitive.

Html5 Guru