ホームページ >ウェブフロントエンド >htmlチュートリアル >div_html/css_WEB-ITnose の align 属性の代替を探しています
div_html/css_WEB-ITnose の align 属性の代替を探しています
- WBOYオリジナル
- 2016-06-24 12:09:481521ブラウズ
w3school のドキュメントには、div の align 属性がサポートされていないことが明確に記載されています。では、同じ効果を達成する他の簡単な方法はありますか?
CSS で text-align:center を追加するだけでは不十分です。Firefox のこの属性の理解は、IE のこの属性の理解とは完全に異なります。前者の理解は div 内の要素が中央に配置されるということですが、後者の理解は、 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"> 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
ネット上では margin:0 auto を使えばいいという話もありますが、私は成功していません。このステートメントの信頼性については確信が持てません
div の align 属性が承認されていないため、アドバイスを求めたいのですが、それを置き換えるには何を使用すればよいですか?
ディスカッションに返信（解決策）
http://w3help.org/zh-cn/causes/RT8003
div.center table{ margin:auto;}
これは、次の子要素に使用されます中央揃えの 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> 元の投稿者の text-align は文字通り text-alignment として理解され、オブジェクト内のテキストの配置を設定します。
margin:0 auto; は、要素の幅が定義されていることが前提であり、それ以外の場合は、左右の中央揃えは行われません。
1階のリンクは非常に強力なので、よく見てください。
aliceui を検索すると、多くの CSS ソリューションがあり、それらも (中国のブラウジング習慣に合わせて) 中国製です
外側のレイヤーで text-align:center を使用し、display:inline-block;*display を追加します:inline; 内部テーブルへ *zoom:1;