32

これは以前に他の人から尋ねられたことがありますが、私は適切な答えを見たことがありません。<center>タグの有効な代替品はありますか？

あることは知っていmargin: 0 auto;ますが、幅を設定する必要があります。もありますがalign="center"、それも無効なコードだと思います。

それが有効であるほど単純なものはあり<center>ますか？非推奨になっているにもかかわらず、私がまだそれを使用してしまうことはまれです。ちょうど今日、私は<center>Webページの中央に配置する必要がある1つのボタンを中央に配置するためにを使用することになりました。はい、幅を設定して指定することもできましたがmargin: 0 auto、1つの要素を中央に配置するのは大変な作業であり、コードを汚してしまい、整然と保つことに誇りを持っています。<center>何も置き換えられていないのに、そもそもなぜ非推奨になったのか、私にはよくわかりません。

ありがとう！

4

9 に答える 9

36

text-align: centerあなたが使うべきものです。実際、理想的な方法は次のとおりです。

.center {
    text-align: center;
}
.center > div, .center > table /* insert any other block-level elements here */ {
    margin-left: auto;
    margin-right: auto;
}

明らかに、それはあなたが望むかもしれないほど単純ではありません。

個人的に、私はただ使用します：

.center {text-align: center;}
.tmid {margin: 0px auto;}

次に、必要に応じてクラスを適用します。

于 2012-07-13T20:43:50.317 に答える
10

センタータグなしで要素を中央に配置するのはそれほど簡単ではありません。

このためには、IE6でも機能する回避策を実行する必要があります。

中央に配置して使用する要素の周りにdivラッパーが必要ですtext-align:center; width:100%。このdiv内に、別のdivを配置marginし、autoとに設定します。text-align:left;

<div style="text-align:center; width:100%">
    <div style="margin:auto; text-align:left;">
        This Container is centered
    </div>
</div>

テキストを中央揃えにしたい場合は、次を使用できます<p style="text-align:center;"></p>

これがコアです。物事を単純化するために、あなたはこれのためにクラスを使うことができます（Kolinkが書いたように）：

CSS：

.center {
    text-align:center;
    width:100%;
}
.center:first-child { //doesn't work in IE 6
    margin:auto;
    text-align:left;
}

HTML：

<div class="center">
    <div>
        This Container is centered
    </div>
</div>
于 2012-07-13T20:53:06.703 に答える
2

要素を中央に配置するには、これを使用します。

.middlr {
   display: block;
   margin: auto;
}

すべて/すべての要素で機能します。私のために働きます。

于 2017-09-01T18:35:18.130 に答える
1

非推奨となる理由<center>は、これがセマンティックタグではなく、プレゼンテーション用であり、本質的にセマンティックではないHTMLでの使用を避ける必要があるためです。

CSSで同じことを実現する方法があるため<b>、などの他の表示要素が非推奨になったのと同じ理由です。<i>

于 2012-07-14T18:11:37.453 に答える
1

センタータグの交換:(両方を行う必要があります）

親要素に次のスタイルを使用します。

text-align：center;

現在の要素には次のスタイルを使用します。

マージン左：自動; マージン右：自動;

于 2016-10-07T23:41:20.470 に答える
1 
.centered {
  margin-left: auto !important;
  margin-right: auto !important;
}
* > .centered {
  text-align: center !important;
  display: block;
}
于 2017-01-07T03:36:34.287 に答える
0

これはPHP-STORMのオファーです：これを使用してください：

<div style="text-align: center;"></div>
于 2015-09-23T19:22:26.547 に答える
-1

text-align: center同等のCSSです

于 2012-07-13T20:43:33.843 に答える
-1

私はブログでこの答えを見つけました

<img src="bullswithhorns.jpg" alt="Michael with the bull" style="width:150px;height:200px;margin:0px auto;display:block">

ソース

于 2017-09-15T22:06:35.483 に答える