What is the best way to center an html element within its containing element?

Let's say you have the following chunk of code:

<div id="container">
  <someelement>This is any element.</someelement>
</div>

What's the best CSS I could use to horizontally center "someelement" within its containing div?

Answers


if your <someelement> is an inline element (i.e defaults to display: inline) apply text-align: center to its container. If <someelement> is a block element set left and right margin to auto and remember to set a width (block elements default to take all available horizontal space unless a width is stated explicitly). You may have to use both methods if you want it to work in IE 5.5 and below too.


JaredPar has the right idea, but here's a cleaner way to do what you're looking for ;)

#container {
    text-align: center;
}

#container someelement {
    margin: 0 auto;
    text-align: left;
}

Try

<someelement style="margin-left:auto;margin-right:auto">This is any element</someelement>

Need Your Help

Using hyphens in argument names

coldfusion jquery-mobile railo cfwheels

I am working with CFWheels and jquery mobile and am trying to pass some jquerymobile settings into a linkto call (mainly the data-icon attribute. I never new this before, but it appears to be that

Would HashMap provide efficient access to object arrays by a string type?

java android arrays libgdx

I'm working on a game and I got the Main class which holds a number of object references arrays.