Search code examples
csscss-tables

CSS3: centering <td> with CSS only

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

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