Centering an element inside of a DIV using HTML/CSS

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.

I was just trying out different things, but none of it worked. Changing the width was one of those things. At this point, I am very close to just creating an invisible div on top and centering each symbol within the invisible div. — Selipso, Aug 01 '13 at 00:11
possible duplicate of [How to align a
to the middle of the page](http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page) — Cody Guldner, Aug 01 '13 at 03:43
@Cody Guldner I already read that thread, none of those solutions applied. P.S. I fixed the problem. Here is the fixed code for readers that have a problem with margin: 0 auto not working in the future. The 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. Code snippet attached `.symbol{ max-height: 8em; width: inherit; display: inline-block; font-family: AvenirCondensed; font-size: 4.5em; float: none; text-align: center; }` — Selipso, Aug 01 '13 at 22:41

doitlikejustin · Answer 1 · 2013-08-01T06:25:58.057

0

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/

edited Aug 01 '13 at 06:25

answered Jul 31 '13 at 22:13

doitlikejustin

6,293
2
40
68

Yes, this is similar! The only improvement I can suggest would be to make the single-character elements more centered. This approach works fine with elements with two characters, but not one or three characters. – Selipso Aug 01 '13 at 00:09
Cool. I added a Fiddle above, link here too http://jsfiddle.net/doitlikejustin/jAE7y/3/ now you can adjust the `padding-top` on the `.element` to adjust the centerness – doitlikejustin Aug 01 '13 at 06:26
thanks for the help! I found the bug that prevented me from centering properly in case you were curious. I commented on my post above – Selipso Aug 01 '13 at 22:40

score 0 · Answer 2 · answered Jul 31 '13 at 22:17

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.

I tried this, but the symbol still didn't center. I think you are right about spilling over, because when I try to float the element to the right, it completely changes rows! — Selipso, Jul 31 '13 at 22:29

score 0 · Accepted Answer · answered Aug 02 '13 at 02:04

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

Centering an element inside of a DIV using HTML/CSS

3 Answers3