7

人々はこのタグに眉をひそめますcenterが、私にとっては常に思い通りに機能します。それにもかかわらず、center非推奨なので、私は努力します。

現在、多くの人が不可解な CSS を提案しているのを目にしますmargin: 0 auto;が、私はそれを機能させることさえできません (fiddle hereを参照)。他の人は変更positionや変更displayを行いますが、それは常に他の何かを壊します。

タグspanとまったく同じように動作するように、css を使用して中央に配置するにはどうすればよいですか?center

<div class="container">
  <span class='btn btn-primary'>Click me!</span>
</div>
4

5 に答える 5

10

Spanはインライン要素であり、margin: 0 autoセンタリング用は、幅が100％未満の非インライン要素でのみ機能します。

1つのオプションは、コンテナに配置を設定することですが、これはおそらくこの状況で望むものではありません。

div.container { text-align: center }

http://jsfiddle.net/MgcDU/1270/

もう1つのオプションは、span：の表示プロパティを変更することです。

/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary { 
  display: table;
  margin: 0 auto;
}

を使用display: tableすると、特定の幅をハードコーディングする必要がなくなります。内容に応じて縮小または拡大します。

http://jsfiddle.net/MgcDU/1271/

于 2013-01-11T21:12:57.790 に答える
2

.container { text-align:center; }内部のすべてdiv.containerが中央に配置される ように設定できます。

一般に、物事を中心に置く方法は2つあります。

  1. インライン要素（テキスト、スパン、画像など）を親の中央にtext-align: center;配置するには、親に設定します。
  2. ブロックレベルの要素（ヘッダー、div、段落など）を中央に配置するには、最初に指定された幅（width: 50%;たとえば）が必要です。次に、左右の余白を自動に設定します。あなたの例でmargin: 0 auto;は、上下の余白は0（これは中央揃えには関係ありません）であり、左右の余白は自動である必要があります-それらは互いに等しくなければなりません。

この<center>要素は、実際には。を含む単なるブロックレベルの要素text-align:center;です。送信border: solid red 1px;すると、幅が100％で、内部のすべてが中央に配置されていることがわかります。左に変更text-alignすると、その子は中央に配置されなくなります。例： http： //jsfiddle.net/KatieK/MgcDU/1275/。おそらく、あなたはあなたの<div class="container">withtext-align:center; }がと同等であると考える必要があります<center>。

于 2013-01-11T21:11:55.883 に答える
1

スパンブロックレベルを作成し、幅を指定して、margin：autoが機能するようにします

このフィドルを参照してください

.center {
         display:block;
         margin:auto auto;
         width:150px; //all rules upto here are important the rest are styling
         border:1px solid black;
         padding:5px;
         text-align:center;
}

更新：幅を指定せず、スパンに要素の自然な幅を持たせるには、親でtextalignを使用する必要があります

このフィドルを参照してください

.container{text-align:center}
.center {
  border:1px solid black;
  padding:5px;
}
于 2013-01-11T21:13:21.390 に答える
-1

<span>インライン要素です。<div>ブロック要素です。センタリングしないのはそのためです。

<div class="container" style='float:left; width:100%; text-align:center;'>
  <span class='btn btn-primary'>Click me!</span>
</div>

「インラインブロック」スタイルを使用して、ブロックに変換する場合にのみ、スパンのコンテンツを中央に配置できます。

于 2013-01-11T21:06:57.403 に答える
-1

子要素をその中に配置できるようにするには、親要素の幅を大きくする必要があります。その後の秘訣margin: 0 auto;は、親と子のコンテナーpositionとdisplay値を互いに互換性があるようにすることです。

.container {
  border: 2px dashed;
  width: 100%;}

.btn {
  display: block;
  margin: 0 auto;
  width: 25%;
}

http://jsfiddle.net/rgY4D/2/

于 2013-01-11T21:18:44.563 に答える