CSS3: centering with CSS only

Question

Here is my fiddle: http://jsfiddle.net/rkfC9/

It used to be so easy when you could simply write in the HTML itself and it should be even easier with CSS but nothing works for me. What is the EASIEST and simplest way to center the contents in both rows in this table?

#table {
    float:left;
}
#table td {
    margin-left:auto;
    margin-right:auto;
}
#brand {
    width:40px;
    height:40px;
    background:red;
}

score 0 · Answer 1 · answered Feb 25 '14 at 18:54

I'd ask why you are using a table, but I'm going to assume it's for tabular data, and not just for layout purposes.

Therefore, an easy answer to your dilemma:

#table {
    float:left;
}
#table td {
    /* setting margins here does nothing... 
       margins are outside of a block element, 
       and td's are table-cell elements, and have no margin 
       text-align: center should take care of any text
       you need to center align. */
    text-align:center;
}
#brand {
    width:40px;
    height:40px;
    background:red;
    /* since this is a block element, with a specified width, 
       you can use margin:0 auto to get it centered within its container. */  
    margin:0 auto;
}

Hope this helps!

score 0 · Accepted Answer · answered Feb 25 '14 at 18:54

0

If you apply the margin settings to the content, it will be centred:

#brand {
    margin-left:auto;
    margin-right:auto;
    width:40px;
    height:40px;
    background:red;
}

answered Feb 25 '14 at 18:54

Andrew Morton

24,203
9
60
84

score 0 · Answer 3 · answered Feb 25 '14 at 18:56

0

try like below it will help you...

#table {
    float:left;
}
#table td {
    margin-left:auto;
    margin-right:auto;
    text-align:center; 
}
#brand {
    width:40px;
    height:40px;
    background:red;
    margin: auto;
}

DEMO : http://jsfiddle.net/rkfC9/3/

answered Feb 25 '14 at 18:56

Pandian

8,848
2
23
33

`margin` does not apply to `` elements. See http://stackoverflow.com/questions/716442/css-cell-margin – Jason M. Batchelor Feb 25 '14 at 19:00
For anyone else reading this, it is the `text-align:center;` which causes the content to be centred, not the margin settings, as mori57 pointed out. – Andrew Morton Feb 25 '14 at 19:26

CSS3: centering with CSS only

3 Answers3