css - divの中央のテキスト？

Question

私はdiv 30px高くて500px広いです。これdivには、上下に2行のテキストを含めることができ、それに応じてスタイル（パディング）されます。ただし、1行しかない場合もあるので、中央に配置したい。これは可能ですか？

score 53 · Accepted Answer

水平方向に中央揃えするには、を使用しますtext-align:center。

vertical-align:middle垂直方向の中央に配置するには、配置先の同じ行に別の要素がある場合にのみ使用できます。ここ
で動作するのを見てください。

高さ100％の空のスパンを使用してから、vertical-align：middleを使用してコンテンツを次の要素に配置します。

テーブルセルを使用したり、上、下、左、右をすべてゼロに設定した絶対位置の要素にコンテンツを配置したりするなど、他の手法もありますが、これらはすべてブラウザ間の互換性の問題に悩まされています。

score 24 · Accepted Answer

テキストを、水平方向（のみ）ではなく、div内の垂直方向の中央に配置する必要があると思います。これを行うために私が知っている唯一の信頼できる方法は、以下を使用することです。

display: table-cell;
vertical-align: middle;

あなたのdivで、そしてそれは任意の数の行で動作します。ここでテストを見ることができます：http：//jsfiddle.net/qMtZV/1/

IE7以前ではサポートされていないため、このプロパティのブラウザサポートを必ず確認してください。

更新2016年2月10日

5年後もこの手法は有効ですが、この問題にはより優れた、より確実な解決策があると思います。現在、Flexboxのサポートは優れているため、 http ： //codepen.io/michelegera/pen/gPZpqEに沿って何かを実行することをお勧めします。

score 7 · Accepted Answer

HTML

<div class="outside">
  <div class="inside">
      <p>Centered Text</p>
  </div>
</div>

CSS

.outside { 
  position: absolute; 
  display: table; 
}

.inside {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

score 5 · Accepted Answer

内にテキストがある場合<div>：

text-align: center;
vertical-align: middle;
display: table-cell;

score 5 · Accepted Answer

5

親divには、次のCSSを使用します。

style="display: flex;align-items: center;"

于 2016-12-03T13:29:41.090 に答える

score 4 · Accepted Answer

div {
    height: 256px;
    width: 256px;
    display: table-cell;
    text-align: center;
    line-height: 256px;
}

秘訣は、のにline-height等しい値を設定することheightですdiv。

score 2 · Accepted Answer

CSSでプロパティvertical-alignを使用して、垂直方向に中央揃えにすることができます。

div {  
    vertical-align:middle;  
}

サイズの問題である場合は、2つのテキスト行とパディングスタイルの高さが30pxを超える可能性が高いことに注意してください。

たとえば、フォントサイズが12ピクセルで、divのパディングが5ピクセルの場合、1テキスト行のdivの高さは5ピクセル（パディング-上）+ 12px + 5ピクセル（パディング-下）= 22px <30pxになるため、問題ありません。

2テキスト行のdivの場合、5px + 12px * 2（2行）+ 5px = 34px> 30pxになり、divの高さが自動的に変更されます。

divの高さ（おそらく40px）を増やすか、パディングを減らしてみてください。

それが役立つことを願っています

score 2 · Accepted Answer

行の高さを追加することも役立ちます。

text-align: center;
line-height: 18px; /* for example. */

score 0 · Accepted Answer

ここで何かが足りないかもしれませんが、試してみましたか？

text-align:center;

??

score 0 · Accepted Answer

0

これはあなたのために働きますか？

div { text-align: center; }

于 2011-05-19T07:48:43.017 に答える

score 0 · Accepted Answer

私は周りを見回しました

display: table-cell;
vertical-align: middle;

最も人気のあるソリューションのようです

score 0 · Accepted Answer

0

display: block;
text-align: center;

于 2014-04-20T16:46:22.670 に答える

score -1 · Accepted Answer

-1

テキストを含むセレクターに追加します

margin:auto;

于 2017-10-11T14:53:32.537 に答える

13 に答える 13