CSS を使用したテキストの中央揃えが IE で機能しない

StackOverflow https://stackoverflow.com/questions/68610

質問

IE で表内のテキストを中央に表示するのに問題があります。

Firefox 2、3、および Safari ではすべて正常に動作しますが、何らかの理由で、IE 6 または 7 ではテキストが中央に表示されません。

私が使用しているもの:

h2 {
  font: 300 12px "Helvetica", serif; 
  text-align: center; 
  text-transform: uppercase;
}

私も追加してみました margin-left:auto;, margin-right:auto そして position:relative;

無駄に。

役に立ちましたか？

解決

表のセルには text-align が必要です。中心。

他のヒント

CSS text-align プロパティは、中央に配置しようとしている要素ではなく、親要素で宣言する必要があります。IE は text-align を使用します。center プロパティを使用してテキストを中央に配置します。Firefox はマージンを使用します。0 auto の場合は、中央に配置しようとしている要素で宣言する必要があります。

<div style="text-align: center">
    <h2 style="margin: 0 auto">Some text</h2>
</div>

タイプミスかもしれませんが、ここではセミコロンが抜けています。

margin-left:auto; margin-right:auto position:relative;

こうあるべきです:

margin-left:auto; margin-right:auto; position:relative;

それが機能しない場合は、テキストを中央に配置しようとしている要素にある程度の幅があることを確認してください。幅を 100% に設定して、何か変化があるかどうかを確認してください。

の text-align: center ブロック要素 (h2) 内のテキストを中央に配置しているため、これで十分です。余白を調整すると、テキストではなくブロックの位置が変更されます。

IE がダミーを吐き出しているだけなのだろうか font そこにある宣言は？

h2 を囲む div/td で text-align:center を使用します。

<table style = "width:400px;border:solid 1px;">
    <tr>
        <td style = "text-align:center;"><h2>hi</h2></td>
    </tr>
</table>

編集：すごい、stackoverflow のコミュニティはかなり速いです。

フレックスボックスを使用できる/使用したい場合は、以下も使用できます。

display: flex;
justify-content: center;
align-items:center
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top