使用HTML / CSS在DIV中将元素居中

Question

I am currently working on a periodic table, and although I got the mass and the number to be placed where I want them to, the element symbol just won't budge. I tried everything: converting it from <p> to <span> to <div> , using display: block and setting margin: 0 auto , using text-align: center , but it still won't budge.

Here's the HTML:

        <div id = "a1" class="element alkalimetal">
            <p>
                <span id = "anumber">118</span>
                <span id = "amass">9.008</span>
            </p>
            <br>
            <div id = "symbol">H</div>
        </div>
        <div id = "a2" class = "element noblegas">

        </div>

Here's the CSS:

#anumber{
    font-family:Arvo;
    top: 0.1em;
    position:relative;
    vertical-align:super;
    font-size:1.5em;
    float:left;
    padding-left:0.2em;
}

#symbol{
    width: 5em;
    font-family: AvenirCondensed;
    font-size: 5em;
    text-align:center;
    margin: 0 auto;
}

#amass{
    font-family:AvenirNext;
    top: 0.1em;
    position:relative;
    vertical-align:super;
    font-size:1.5em;
    float:right;
    padding-right:0.2em
}
.element{
    border: 1px solid black;
    border-radius: 3px;
    height: 8em;
    width: 8em;
    float: left;
}

PS: This table is designed for mobile so I want to avoid using position:absolute or fixed margin widths.

Answer 1

Is this what you are trying to accomplish?

http://jsfiddle.net/doitlikejustin/jAE7y/

#symbol{
    width: 5em;
    font-family: AvenirCondensed;
    font-size: 5em;
    text-align:center;
    margin: 0 auto;
    display:table-cell;
    vertical-align:center;
}

Here is an updated Fiddle with multiple elements http://jsfiddle.net/doitlikejustin/jAE7y/1/

Updated with alignment and fixed classes http://jsfiddle.net/doitlikejustin/jAE7y/3/

Answer 2

Change your #symbol rule to the following:

#symbol{
    /* width: 5em; REMOVE THIS */
    font-family: AvenirCondensed;
    font-size: 5em;
    text-align:center;
    /* margin: 0 auto; REMOVE THIS */
}

Your width was causing the symbol to spill over the div it was sitting in, breaking the flow. The margin: 0 auto was no longer needed after that.

Also, as a side note, you should be using more Classes instead of ID's. ID's are intended for elements that are only used once per page. You can easily set #symbol to a class .symbol as well as .amass and anumber . This will allow you to set the CSS rules once and use them for each element in the table.

Answer 3

Here's the solution for readers that have a problem with margin: 0 auto not working like I did, or with a similar code. Key #1 was to set the inner div to float:none because it inherited this property from .element. Key #2 was to set the inner div's width to width:inherit so that text-align: center would position the text properly. Code snippet attached

.symbol{ max-height: 8em;
    width: inherit;
    display: inline-block;
    font-family: AvenirCondensed;
    font-size: 4.5em;
    float: none;
    text-align: center;
}