How to center my images in my case?


Tags: html,css

Problem :

I have a question regarding the text align issue

I have something like

HTML

<div id='wrapper'>
   <div class='item'><img src='img1.jpg' /></div>
   <div class='item'><img src='img2.jpg' /></div>
   <div class='item'><img src='img3.jpg' /></div>
   <div class='item'><img src='img4.jpg' /></div>
</div>

CSS

#wrapper{
    width:300px;
    text-align:center;
}

.item{
    display: inline-block;
    margin: 5px;
}

It display like these

 -------------------------------------
|       img1      img2     img3       |
|                                     |
|                 img4                |
|                                     |
|                                     |
 -------------------------------------

I was hoping to get like these:

(Please noted img 1 to img3 are still in the center of the div but not img4)

 -------------------------------------
|       img1      img2     img3       |
|                                     |
|       img4                          |
|                                     |
|                                     |
 -------------------------------------

Also, the numbers of images are dynamic and I can't tell how many image I would have.

Is there something you guys can help? Thanks a lot!



Solution :

Remove the

text-align:center;

from the #wrapper CSS class and provide a width of 100% to it.

So, essentially your wrapper class should look as follows:

#wrapper{
    width:100%;
}

See this here: http://jsfiddle.net/7kvX2/1/

UPDATE

I have updated my fiddle. I think this is what you are looking for, though I'm not sure if I've fully grasped what you are loking for.

The images as a bunch remain centered. Even, when you add odd number of images, they stack the way you want.

See here-> http://jsfiddle.net/7kvX2/2/

Hope this helps!!!


    CSS Howto..

    PHP How to not cache generated HTML but cache static data like images/js/css

    How to make the contents of an HTML table fit within their cells?

    using jquery show/hide doesn't keep css in div

    How to apply css styling on rewards points notification email in opencart 2.0.1.1?

    How can I style a JavaFX menu and its items in CSS?

    How to get glyphicons working in twitter-bootstrap?

    How to show div property that is in a class with javascript

    How to dynamically generate CSS3 keyframe steps using SASS?

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

    How to replace css using jquery after user agent detection

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How to animate a progress bar in Bootstrap 4?

    How to highlight syntax inside
    tag?

    How to set top div height to the remaining height css

    How to get resultant HTML after executing all scripts?

    How do I make my React Components to be responsive via css media queries?

    how fix bug with white lines between the cells of the table in IE11

    selenium - how to click on a link based on its text using css instead of xpath and without using the contains operator?

    how do I find out which skin Telerik's RADeditor is using by default?

    How to automaticly let HTML cut the edges based on the setted height of the image?

    CSS: how to make bottom div width same as the width of image above?

    CSS(3): How to display elements after each other

    How should I use `position` and other properties correctly to position my web page?

    Three inline divs: how to make display all three inline OR three block (NOT 2 + 1)?

    Fade in/out text slideshow

    How to create shapes in css? [closed]

    How to solve css issue to display image caption?

    How to write css fallbacks for vh vw

    How to fit HTML table row to its content

    how to position two image as a background image on div by css