web-dev-qa-db-ja.com

divの中央のテキスト？

div30px高および500px幅。このdivには2行のテキストを上下に含めることができ、それに応じてスタイル設定（埋め込み）されます。ただし、1行しか含まれていない場合があり、中央に配置する必要があります。これは可能ですか？

csspaddingspacing
42
Rifki

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

垂直方向に中央揃えするには、同じ行に別の要素が配置されている場合にのみvertical-align:middleを使用できます。
動作確認 こちら 。

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

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

52
SamGoody

テキストは、水平方向ではなく（のみ）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 。

26
michelegera

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

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

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

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

style="display: flex;align-items: center;"
3
Ayan
div {
    height: 256px;
    width: 256px;
    display: table-cell;
    text-align: center;
    line-height: 256px;
}

トリックは、line-heightをheightのdivと等しく設定することです。

3
Henry Zhu

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

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

私はここで何かを見逃しているかもしれませんが、試しましたか：

text-align:center;

？

1
Adam Moss

CSSでプロパティをvertical-alignに設定して、垂直方向の中央に配置することができます。

div {  
    vertical-align:middle;  
}

サイズに問題がある場合は、2テキスト行とパディングスタイルが高さを30ピクセル以上にする可能性が高いことに注意してください。

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

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

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

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

1
G.K.

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

div { text-align: center; }
0
kaveman

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

margin:auto;
0
Matoeil

私は周りを見回し、

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

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

0
godzilla
display: block;
text-align: center;
0
Dexy86