web-dev-qa-db-ja.com

<div align = "center">のCSSの置き換え

私はこの質問が何度も尋ねられたことを知っていますが、満足のいく答えを見たことがありません。つまり、実際に機能する答えです。

では、また行きましょう。このjsFiddleを取ります： http://jsfiddle.net/KFMyn/3/

HTMLからalign="center"を削除する場合、結果を元の外観と同じにするにはどのCSSを使用する必要がありますか？

私が見つけた答えは通常margin:0 autoやtext-align:centerになりますが、どちらも結果を元の外観と同じにするという望ましい効果はありません。

htmlcssdeprecated
21
Mr Lister

テキストの中央揃えはほとんどのテキスト要素をカバーしますが、テーブルを中央揃えにするために少し余分が必要です

div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}

http://jsfiddle.net/NYuv8/4/

24
Paul Sheldrake
div {width:400px; text-align: center;}
table {display:inline-block;}​

ポールの答えに加えてうまくいくはずです。

http://jsfiddle.net/KFMyn/13/

2
Andre Loker
    margin: 0 auto; 
    text-align: center;

bootstrap gridsを使用している場合、上記のコードは機能しない可能性があります。bootstrap 4およびITがすべての場合に機能するブラウザ

<div class="row">
  <div class="col-sm-2">
     <div class="customClass mx-auto">
         <p class="text-center"> your text goes here </p>
     </div>
  </div>
</div

col-sm-2、3、4 ....... 12のような任意の列を配置できます

さまざまな状況でのセンタータグの交換

1。text-center p、a、button、hタグなど、つまりデータまたはテキストを直接含むすべてのタグで機能します

2。Flex別の要素内に完全な要素を配置するために使用できますが、参照用にドキュメントをチェックするユーティリティが多くあります

次の方法でフレックスを使用して要素を中央に配置できます

display:flex;
justify-content:center;
align-items:center;

別のインポートプロパティはflex-direction、つまり

flex-direction:column
flex-direction:row

必要な配置のタイプに応じてフレックス方向を使用します

。mx-auto（ブートストラップクラス）

1
Nishant Singh
div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }

私のために働く。しかし、複数の入れ子になったdom要素がある場合、これは適切に機能しない可能性があります

1
pduersteler

次のように、テーブルのスタイルを設定することもできます。

div {
    width:400px; 
    margin: 0 auto; 
    text-align: center;
}
div table {
  margin: 0 auto;
}
0
walmik