Looking for an alternative to the align attribute of div_html/css

Looking for an alternative to the align attribute of div_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:09:48

Original

1524 people have browsed it

The w3school document clearly states that the align attribute of div is not supported. So is there any other easy way to achieve the same effect?

Just adding text-align:center with CSS is not enough. Firefox’s understanding of this attribute is completely different from IE’s understanding of this attribute. The former’s understanding is that the elements inside the div are centered, while the latter’s understanding is The div block is centered

The following is my test code:

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        <style type="text/css">            div.center            {                text-align:center;            }        </style>        <title>center测试</title>    </head>        <body>        <div class="center">            <table border="1">                <tr>                    <td>一</td>                    <td>二三</td>                </tr>                <tr>                    <td>四五六</td>                    <td>七八九十</td>                </tr>            </table>        </div>    </body></html>

Copy after login

firefox running results

ie running results

There is also a saying on the Internet that using margin:0 auto, but I have not succeeded. I doubt the authenticity of this statement

Please advise, since the align attribute of div is not approved, then What should I replace it with?

Reply to discussion (solution)

http://w3help.org/zh-cn/causes/RT8003

div. center table{ margin:auto;}
This is used for the child elements of the centered DIV

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        <style type="text/css">            * {				margin: 0px auto;				padding: 0px;			}        </style>        <title>center测试</title>    </head>        <body>        <div class="center">            <table border="1">                <tr>                    <td>一</td>                    <td>二三</td>                </tr>                <tr>                    <td>四五六</td>                    <td>七八九十</td>                </tr>            </table>        </div>    </body></html>

Copy after login

The original poster, text-align is literally understood as text-alignment, That is, set the alignment of text in the object.

margin:0 auto; has a centering effect on block-level elements. The premise is that a width must be defined for the element. Otherwise, the width will default to 100%, and there will be no left and right centering.

The link on the 1st floor is very powerful, take a closer look.

If you search aliceui, there are many CSS solutions, and they are also made in China (in line with Chinese browsing habits)

Use text-align:center on the outer layer and add display:inline to the internal table. -block;*display:inline;*zoom:1;Try the style