3 Images Centered In A Row

July 31, 2024 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;
}

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

Hope this helps! :)

Solution 2:

html

<divclass="content"><div><imgsrc="facebook.png"alt=""width="75"height="75"/></div><div><imgsrc="twitter.png"alt=""width="75"height="75"/></div><div><imgsrc="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; :

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

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

<divalign="center"><divalign="center;"class="social"><imgsrc="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png"alt=""width="75"height="75" /></div><divalign="center;"class="social"><imgsrc="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png"alt=""width="75"height="75" /></div><divalign="center;"class="social"><imgsrc="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;
}

<divclass="contain"><divalign="center;"class="social"><imgsrc="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png"alt=""width="75"height="75" /></div><divalign="center;"class="social"><imgsrc="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png"alt=""width="75"height="75" /></div><divalign="center;"class="social"><imgsrc="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 Code Review