Home >Web Front-end >HTML Tutorial >Looking for an alternative to the align attribute of div_html/css_WEB-ITnose
Looking for an alternative to the align attribute of div_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:09:481519browse
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> 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> 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