Orkun Oz Orkun Oz - 1 year ago 42
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>


Lal Lal
Answer Source

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


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.


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.