Centering inline-block images

Question

I want to center a div of inline-block images. This is the relevant HTML:

<div class = "row">
        <div class = "icon"> <img src = "icon.PNG" alt="Some of the interesting stuff I've worked on."> </div>
        <div class = "icon"> <img src = "icon.PNG" alt="My past experiences."> </div>
</div>

and the CSS:

.row{
   display: block;
}
.icon{
   margin: 0 auto;
}

the result is supposed to be the icons side-by-side and centered horizontally. Right now they are centered horizontally but they are all underneath eachother.

Help is greatly appreciated, I'm new to web development.

Thanks.

Darren · Answer 1 · 2016-07-23T14:36:38.830

0

Thatt's because a div is a block element. You will have to change the HTML element for icons to be an inline element such as a span

<span class="icon"> <img src="icon.PNG" alt="Some of the interesting stuff I've worked on."> </span>
<span class="icon"> <img src="icon.PNG" alt="My past experiences."> </span>

Or alternatively override the display property to inline-block on your icon class as shown below.

.icon {
   display: inline-block;
}

Demo: https://jsfiddle.net/z7qfnem4/

edited Jul 23 '16 at 14:36

answered Jul 23 '16 at 14:29

Darren

68,902
24
138
144

Thanks, this lines them side-by-side but it doesn't center them. How do I do this? – FatUglyProud Jul 23 '16 at 14:41

score 0 · Answer 2 · answered Jul 23 '16 at 14:30

0

Try this:

.row {
 text-align: center;
}

.icon {
 display: inline-block;
}

This works because display: inline-block; will allow text-align: center; to work on block level elements.

answered Jul 23 '16 at 14:30

Toby

12,743
8
43
75

Centering inline-block images

2 Answers2