简体   繁体   中英

margin in css doesn't work

I have Table and I want to put it in the middle of the page. If I set align attribute to center, it works but I want to do that with CSS. Here is my CSS:

center vorder, td
{
  border-color:Blue;
  border-style:double;
  color:#8A2BE2F;
  margin-left:auto;
  margin-left:auto;
  margin-right:auto;

}

and this is my table code:

<table class="center vorder" >
<tr><td colspan="4">mittige Tabelle</td></tr>
<tr><td>Element 0 0</td><td>Element 0 1</td><td>Element 0 2</td><td>Element 0 3</td></tr>
<tr><td>Element 1 0</td><td>Element 1 1</td><td>Element 1 2</td><td>Element 1 3</td></tr>
<tr><td>Element 2 0</td><td>Element 2 1</td><td>Element 2 2</td><td>Element 2 3</td></tr>
</table>

Thank you for your help.

Your CSS syntax is off.

table.center
{
  margin-left:auto;
  margin-right:auto;

}

td {
  border-color:Blue;
  border-style:double;
  color:#8A2BE2F;
}

you missing syntax, need to prefix class with "."

.center.vorder, td
{}

Refer working fix http://jsbin.com/azoxes/1/edit

You sould use . for class in CSS:

.center.vorder
{
  border-color: blue;
  border-style: double;
  color: #8A2BE2F;
  margin: 0 auto;
}

If you want center the td's text you shuld use this:

td
{
    text-align: center;
}

From that code, your css is not even getting used. It should be something like:

.center.vorder, td

or

.center.vorder td

..depending on what you want to target.

Also you have margin-left: auto twice, so remove one. You can do it in one line like so:

margin: 0 auto;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM