Center images horizontally

Question

I have 3 images that i want to center horizontally inside a div,so they need to be centered and next to each other.

here is my code:

<div class="container">
<div class="row">
        <div class="col-xs-4 col-xs-offset-4" >

            <img class="img-responsive  " src="images/slike/pic1.png" alt=""/>
            <img class="img-responsive   " src="images/slike/pic2.png" alt=""/>

            <img class="img-responsive  " src="images/slike/pic3.png" alt=""/>      

        </div>
    </div>
            </div>

When i try center-block class the images are centered but not horizontal but vertical,when i try pull-left or right they are horizontal but not centered.What needs to be done?

score 2 · Accepted Answer · answered May 27 '14 at 23:02

assuming your images are sized properly, and can all fit on the same line, try using the following CSS properties:

img {
    display:inline-block;
}

.col-xs-4 {
    text-align:center;
}

But warning for inline-block, all white space between your img elements will have to be removed or it will show up as "spaces" between the images.

score 2 · Answer 2 · edited May 23 '17 at 12:20

2

You just need to apply text-align:center to the parent container.

img is an inline-block element by default, and will be influenced by the text-align property:

.col-xs-4 {
    text-align:center;
}

Here's a Fiddle demonstrating it in action.

edited May 23 '17 at 12:20

Community

1
1

answered May 27 '14 at 23:19

Timmah

1,283
2
10
26

Center images horizontally

2 Answers2