Orkun Oz Orkun Oz - 5 months ago 5
CSS Question

How to center 3 imgs side by side?

I'm trying to center 3 social-media icons side by side. but couldn't figure out how to do it.

enter image description here

<div class="maintext flipInX animated">

<div class="socials wow bounce animated" data-wow-delay="1s">
<a href="www.facebook.com"> <img src="http://s33.postimg.org/yitnj0vbz/fblogo.png"/></a>
<a href="www.github.com"> <img src="http://s33.postimg.org/r7peysh3z/github.png"/></a>
<a href="www.linkedin.com"> <img src="http://s33.postimg.org/lq7vvi8wv/linkedin_3_32.png"/></a>
</div>

</div>

Lal Lal
Answer

See this fiddle

Make the <a> inside the .socials div inline-block element which gives it a property as that of text. And, then add text-align:center to the parent, ie the .socials div.

Add the below given CSS to make it centered

.socials{
    text-align:center;
}
.socials a{
    display:inline-block;
}

UPDATE

As, @LGSon mentioned in his comment,

An inline element does not need to be set to inline-block to center itself when the parent has text-align: center

you just need to add the below given CSS to make it centered.

.socials{
        text-align:center;
}

But, please do keep in mind that you have to set the display of any block level elements to inline-block if it needs to be centered using the above said method.

Comments