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 adjust the height of a Bootstrap accordion

    How to apply CSS changes for the last

    element of the 3rd div class span8

    How to get a table-cell aligned to the right?

    How do i make a flexible div with a background in css

    How to add style to the parent when radio button is selected

    How do I manipulate the same function in javascript for two different classes

    How to build a mobile version of a non-mobile website? [closed]

    How to underline list items separately with CSS?

    How to make a GWT-like CaptionPanel manually

    How to add multiple css rules at once through Dev-Tools or Firebug

    How to make CSS NOT do something [duplicate]

    How to zoom into a specific location of an image using CSS

    How to style an input that is a type=“button”?

    How to display a binary search tree using CSS, HTML and a bit of Javascript?

    How can I give a child element of one parent a higher z-index than another parent?

    How to add a color transitions in CSS and HTML like the one in the login area of the Instagram app?

    How to use nth-child with :hover to style multiple children?

    How to use nify javascript to make round corner box? Im using but not working

    HTML: How to add an image using CSS as linked style sheet

    CSS - HTML how to make the anchor image go to a specific spot

    How to get the real font name of a div on a web page when it set css font-family?

    How to apply different css margin-top to each children in a list

    how to get by title attribute

    How can I make a button change its position after being clicked?

    how to fix an element inside bootstrap modal with respect to bootstrap modal

    How can I centralize this jquery styling colors into css?

    how to insert a ribbon inside a div how background without images only pure css? [closed]

    show hover by default using CSS

    CSS: How to make this topheader?