div_html/css_WEB-ITnose の align 属性の代替を探しています-htmlチュートリアル-php.cn

div_html/css_WEB-ITnose の align 属性の代替を探しています

WBOY

リリース： 2016-06-24 12:09:48

オリジナル

1524 人が閲覧しました

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;