Centering an element inside of a DIV using HTML/CSS - html

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;
}
P.S.: This table is designed for mobile so I want to avoid using position:absolute or fixed margin widths.

Answer 1

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 2

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 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;
}