7

text-alignテキストと画像が中央に配置されるのはなぜですか?

ここに画像の説明を入力

CSS:

#SupplierContainer {
    width: 100%;
    margin: 0 auto;

    background-color: Blue;

}
#SupplierContainerContentHolder {
    background-color: Yellow;
    text-align: center;
}

HTML:

<div id="SupplierContainer">
    <div id="SupplierContainerContentHolder">
        <img src="~/Shared/Suppliers/Default" alt="Suppliers: [name removed]." />
        <br />

        <p>View a complete list of our Suppliers.</p>
    </div>
</div>
4

3 に答える 3

7

W3から、

このプロパティは、ブロック コンテナーのインライン レベルのコンテンツがどのように配置されるかを示します。

<img>はインライン ブロック要素であるため、このプロパティは にも適用され<img>ます。

それが述べられている<img>タグを見てください：

IMG 要素にはコンテンツがありません。通常は、src 属性で指定された画像によってインラインで置き換えられます。

于 2012-10-27T06:43:26.070 に答える
1

text-alignは、要素のコンテンツ領域内のインライン要素 (テキストだけでなく) を整列するために使用されるためです。画像が「text-align」の影響を受けないようにするには、次のようにフロートします。

#SupplierContainerContentHolder img { float:left }
于 2012-10-27T06:44:27.940 に答える
1

画像を左右に配置したい場合はfloat、を使用できます。

#SupplierContainerContentHolder img{
    float:left;
}

例。

于 2012-10-27T06:44:33.090 に答える