在div中对齐内容

Question

How to align the second div(display_bar) to the center

<div id="display" style="display:inline;font-size:150%;" > </div>
<div name="display_bar" id="display_bar" 
    style="margin-left: auto;margin-right: auto;width:125em;text-align:center;visibility=visible;display:inline;">
    <img class="view_prev" src="first.png"> 
    <img class="view_prev" src="2.png" > 
    <img class="view_prev" src="3.png" > 
    <img class="view_prev" src="4.png" > 
    <img class="view_prev" src="5.png" > 
</div>

Also the second div should be inline with the first div

Thanks.

Answer 1

Since it is display: inline , set text-align: center on its parent element and ask yourself if it should be a span instead of a div.

(NB: CSS uses : , not = and the alt attribute is mandatory for img elements)

Answer 2

Try this css:

#display_bar
{
  margin:0 auto;
  width:300px; /* or whatever width */
}

Answer 3

You can also center an element with display: inline-block or display: inline by using text-align: center on the parent element. This will center the text inside as well. I think this may be what you want, since you said you wanted to align everything to the center. Just put it all into the div.

For example:

<div class="wraper">
    <div class="inwrap">
        Lorem ipsum dolor text...
    </div>
</div>

CSS:

.wraper {
}

.inwrap {
    width: 50%;
    margin: 0 auto;
}

OR:

 .wraper {
        text-align: center;
    }

    .inwrap {
        display: inline-block; /*or inline*/
        width: 50%;
    }