<center>タグがHTMLで廃止されたのはなぜですか?


202

<center>HTML のタグが廃止された理由を知りたいだけです。

これ<center>は、コンテナーを<center>タグでカプセル化することにより、テキストと画像のブロックをすばやく中央揃えする簡単な方法でしたが、今のところ、これを行う簡単な方法はありません。

「もの」(margin-left:auto; margin-right:auto;と幅のものではない)を中央に配置する簡単な方法を知っている人はい<center>ますか?また、なぜ廃止されたのですか?

回答:


232

<center>それは定義するための要素は廃止されたプレゼンテーションの内容のを-それは、その内容を説明していません。

中央揃えの1つの方法は、要素のmargin-leftおよびmargin-rightプロパティをに設定してからauto、親要素のtext-alignプロパティをに設定することcenterです。これにより、最新のすべてのブラウザで要素が中央に配置されることが保証されます。


7
はい、CSSはプレゼンテーションとデータの分割に関するすべてです。
Ivan Nevostruev 2009年

3
Ivan、CSSはすべてプレゼンテーションに関するものです。これは分割に関するものではありません-いくつかの回答のインラインスタイル属性が示すように!もちろん、インラインCSSではなく、賢明なクラスを使用することは非常に良い考えですが、それはプレゼンテーションにCSSを使用する際の明確な概念です。
Peter Boughton、

15
私は両方の設定ここで、(私は気圧思い出すことができない)場合によっては持っていたmargintext-alignIEで私の要素をセンタリングませんでしたが、とそれを包む<center>やった仕事を...私は例を見つけようとします。
Mottie

12
自動マージントリックは、ブロックレベルの要素に対してのみ機能します。display: block;インライン要素で使用します。
スティーブグラハム、

88
典型的なWPまたはDrupalテンプレートの17個のネストされたdivは、プレゼンテーションの詳細を分離するのに本当に役立つと確信しています:P </ troll>(<-見た目、セマンティックタグ!)
間違いなく

17

W3Schools.comによると、

center要素はHTML 4.01で廃止され、XHTML 1.0 Strict DTDではサポートされていません。

HTML 4.01仕様では、タグを非推奨のため、この理由を与えます:

CENTER要素は、align属性を "center"に設定してDIV要素を指定することとまったく同じです。


14
私はこれが実際に真実であることを望みます。
badp

61
これは実際には真実ですが、DIVのalign属性も非推奨になっています:D
Oleh Prypin

22
w3schoolsはW3Cではないことに注意してください。
showdev

4
「CENTER要素は、align属性を "center"に設定してDIV要素を指定することとまったく同じです。」ただし、タグが中央にあることを確認すると明らかです。これが正当な理由である場合、<strong>、<b>、すべての<h>およびその他のタグを取り除き、CSSを使用して<span>と同じことを行うと言います。さらに、XHTMLはキャンバスなどのHTML5タグも認識しません。マーキー、センター、テーブル、フレームとの戦争のために廃止されただけです。
ドミトリー

2
@Dmitry <strong>および<h>には、視覚的なスタイリングを超える意味上の意味があります。<center>がまだ周りにある場合は、CSSでスタイルを設定できます(コンテンツを左揃えにするなど)。
Nick Rice

16

私が行うことは、中央揃えやフローティングなどの一般的なタスクを実行し、それらからCSSクラスを作成することです。そうすることで、どのページでも使用できます。同じ要素で必要なだけ呼び出すこともできます。

.text_center {text-align: center;}
.center {margin: auto 0px;}
.float_left {float: left;}

これで、HTMLコードでそれらを使用して簡単なタスクを実行できます。

<p class="text_center">Some Text</p>

12

CSSでは何も機能しないため、まだ<center>タグを使用しています。<div>トリックを使用しようとして失敗した例:

<div style="text-align: center;">This div is centered, but it's a simple example.</div>
<br />
<div style="text-align: center;"><table border="1"><tr><td>&lt;div style="text-align: center;"&gt; didn't center correctly.</td></tr></table></div>
<br />
<div style="text-align: center;margin-left:auto;margin-right:auto"><table border="1"><tr><td>&lt;div style="text-align: center;margin-left:auto;margin-right:auto"&gt; still didn't center either</td></tr></table></div>
<br />
<center><table border="1"><tr><td>Actually Centered with &lt;center&gt; tag</td></tr></table></center>

<center>は結果を取得します。代わりにCSSを使用するには、CSSをいくつかの場所に配置し、中央に配置するために混乱させる必要があります。あなたの質問に答えるために、CSSは<center> <b> <i> <u>を冒涜的で、不誠実で、自分の仕事の安全のためにあまりにも単純すぎると敬遠した信者と信者の信仰になりました。そして、彼らがあなたからあなたの<table>を奪おうとするなら、colspanまたはrowspan属性に相当するCSSが何であるかを彼らに尋ねてください。

重要なのは、抽象的な真実の真実ではなく、生きている真実です。
-禅


使用することもできますdisplay:flex; justify-content:center; text-align:center
Justin Liu

11

必要に応じて、これをXHTML 1.0 TransitionalおよびHTML 4.01 Transitionalで引き続き使用できます。他の唯一の方法(私の意見では最良の方法)はマージンを使用することです。

<div style="width:200px;margin:auto;">
  <p>Hello World</p>
</div>

HTMLは要素を定義する必要があり、そのプレゼンテーションを管理するものではありません。


8

マークアップ、つまりHTMLタグは、外観ではなく意味と構造を表すことを目的としています。それは初期のバージョンのHTMLではひどく混同されていましたが、現在人々がそれを整理しようとしている標準です。

タグに外観を制御させることの1つの問題は、ページがスクリーンリーダーなどの障害者用デバイスでうまく機能しないことです。また、意味を明確にするのに役立たず、むしろ異なるレベルの情報で混乱させるテキスト内にたくさんのタグが含まれることにもなります。

したがって、CSSは、書式設定/表示を別の言語に移動するように考えられました。これは、テキストとは別であり、簡単にそのまま維持できます。特に、これにより、スタイルシートを切り替えて、他のマークアップに触れることなくWebページの外観を変更できます。そして、それを1つのうねりの多くのページで実行できるようにするためです。

CSSがこれを行うために提供するツールは必ずしもエレガントではありません。私はあなたの味方です。たとえば、効果的な垂直方向のセンタリングを行う方法はありません。そして、水平方向のセンタリングは、それが単にの影響を受けやすいテキストtext-alignではない場合、あまり良くありません。

簡単で効果的で混乱するか、クリーンでエレガントで扱いにくいかを選択できます。なぜWeb開発者がこの混乱を我慢したのかはわかりませんが、少なくとも彼らが仕事を終わらせる機会があれば喜んでいると思います。


4
+1:私はWeb開発者でさえない人物として、CSSを使用して特定のプレゼンテーション属性を指定することがいかに面倒かを認識しています。構造マークアップを混乱させるよりも、CSSを使用する方が良いと思いますが、... WTF?そのCSS仕様、リモートジャングルで見つかったランダムなサルを誰が定義するのですか?真剣に。
ダン成形

2
遠くのジャングルでランダムなサルを侮辱しないでください!
DaveWalley 2014

7

HTMLは、レイアウトの制御ではなく、データの構造化を目的としています。CSSはレイアウトを制御することを目的としています。<table>これと同じ理由で、多くの設計者がレイアウトに使用するのを嫌がることもわかります。



3

CSSにはtext-align: centerプロパティがあり、これはセマンティックではなく純粋に視覚的なものであるため、HTMLではなくCSSに委託する必要があります。


1
選択肢に加えて非推奨になった理由を説明するための+1。
moribvndvs 2009年

8
ただしtext-align、コンテナ自体ではなく、コンテナのコンテンツを揃えます
Andreas Grech '25

ああ、そうです、それがブロックレベルの要素なら、「自動」パディングがそれを行います。インライン要素の場合はtext-align: center、その親要素で使用します。
keithjgrant 2009年

(おっと、パディングではなく自動マージンを意味します)
keithjgrant 2009年

@AndreasGrech - <center>両方。迷惑なほど広範です。
クエンティン

3

思考の糧:テキストを音声に変換するシンセサイザーは何をするの<center>でしょうか?


1
おそらく「中心」または「中心」を話します。
DaveWalley 2014

cssのtext-align:centerの場合と同じです。私は考えます。
MSpreij

0

これをCSSに追加して使用できます <div class="center"></div>

.center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

それが<center></center>削除された場合に備えて準備しておく場合は、これをCSSに追加してください

center{
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

-1

最も人気のない回答

  1. 廃止されたタグは必ずしも悪いタグではありません。
  2. ありますプレゼンテーションロジックを扱うタグは、centerそれらの一つであるが、
  3. centerタグ付きのdivと同じではありませんtext-align:center
  4. あなたが何かをする別の方法があるという事実はそれを無効にしない。

がオールドスクールHTML4か何かを擁護していると思う悪名高いダウンボーターがここにいるので、説明させてください。いいえ、違います。しかし、周りの議論centerは単にトレンド戦争であり、有効な目的を果たすタグを捨てる本当の理由はありません。

それでは、それに対する主な議論を見てみましょう。

  • 「セマンティクスではなく、プレゼンテーションについて説明しています!」
    いいえ。これは論理的な配置を示します。<p>また、他のタグと同じように、デフォルトの外観があります<ul>。しかし、ポイントは、囲まれた部分とその周囲との関係です。センターは「これは視覚的に異なる位置付けによって分離されたものです」と言います。

  • 「それは無効です」
    はい、そうです。廃止予定なので、後で削除できます。今から15年以上。そして、それは明らかにどこにも行きません。非常に読みやすく、要点があるため、このタグを使用している主要なサイトがあります。

  • 「HTML5ではサポートされていません」実際
    、最も広くサポートされているタグの1つです。

  • 「オールドスクール」
    靴ひももオールドスクール。新しいメソッドは古いメソッドを無効にしません。プログレッシブでモダンな感じがしたい。しかし、それを法律にしないでください。

  • 「それはばかげている/ぎこちない/ラメ/あなたについての物語を語る」
    これらのどれも。それはハンマーのようなもので、特定の仕事のための1つのツールです。同じジョブの他のツールと同じツールの他のジョブがあります。しかし、それは特定の問題を解決するために作成され、その問題はまだ残っているので、専用のソリューションを使用することもできます。

  • 「CSSでこれを行うべきではありません。」
    センタリングはCSSによって完全に実現できますが、これは唯一の方法ではなく、適切な方法だけです。サポートされていて、機能していて、読みやすいものであれば何でも使用できます。

TL; DR:

使用しない唯一の理由<center>は、人々があなたを憎むからです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.