web-dev-qa-db-ja.com

<center>の交換

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

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

有効な<center>のような単純なものはありますか？それが廃止されているにもかかわらず、私がまだそれを使用してしまうまれな場合があります。ちょうど今日、<center>を使用して、必要な1つのボタンをWebページの中央に配置しました。はい、幅を設定してmargin: 0 autoを指定することもできましたが、これは1つの要素を中央に配置するための多くの作業であり、コードを汚します。何も置き換えられていないのに、<center>が最初に廃止された理由がよくわかりません。

ありがとう！

htmlcssdeprecated
27
JacobTheDev

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;}

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

28
Niet the Dark Absol

中央タグなしで要素を中央に配置するのは簡単ではありません。

このためには、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>
7
WolvDev

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

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

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

1
ryanwaite28

中央タグの置換：（両方を実行する必要があります）

親要素にこのスタイルを使用します：

text-align：center;

現在の要素にこのスタイルを使用します：

margin-left：auto; margin-right：auto;

0
gnath

<center>が廃止された理由は、タグがセマンティックタグではなく、プレゼンテーション用であるためであり、本質的にセマンティックではないHTMLでの使用は避けなければなりません。

CSSで同じことを達成する方法があるため、<b>、<i>などの他のプレゼンテーション要素が廃止されたのも同じ理由です。

0
Mat Richardson
.centered {
  margin-left: auto !important;
  margin-right: auto !important;
}
* > .centered {
  text-align: center !important;
  display: block;
}
0
Vino