web-dev-qa-db-ja.com

Div内でテキストを垂直方向に揃える

下のコード（ JS Fiddle _のデモもあります）は、テキストを中央に配置しません。 margin-top属性を使用しても、テキストをdiv内で垂直方向に中央揃えする方法はありません。これどうやってするの？

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>

#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}

#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}
cssvertical-alignment
616
Cyclone

あなたのテキストコンテンツのためのコンテナ、おそらくspanを作成してください。

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}
<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

JSFiddle

426
Andres Ilich

Andres Ilichはそれを正しく持っています。万が一誰かが彼のコメントを見逃した場合….

A. 1行のテキストしかない場合： 

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}
<div>vertically centered text</div>

B.）複数行のテキストがある場合： 

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 18px; /* <-- adjust this */
}
<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>
648
Jenny O'Reilly

2016年4月10日更新

フレックスボックスを使用して、アイテムを垂直方向（または水平方向）に配置するようになりました。

<div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

Flexboxのよいガイドは CSS Tricks で読むことができます。指摘してくれてありがとう（コメントから）Benは、更新する時間がなかった。

Mahendraという名の良い人が非常に有効な解決策を投稿しました here

次のクラスは、要素をその親を中心にして水平方向と垂直方向の中央に配置します。

.absolute-center {

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}
203
Omar Tariq

これは古い質問ですが、受け入れられた答えは複数行のテキストには機能しません。私はJSfiddle を更新してcssの複数行のテキストの縦方向の整列 を説明したように ここ ：

<div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

これは<br />と一緒に動作します。

62
Eduard Gamonal

これを試して：

HTML

<div><span>Text</span></div>

CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}
25
Petr Voborník

これは単にうまくいくはずです。

#column-content {
        --------
        margin-top:auto;
        margin-bottom:auto;
    }

あなたのデモで試してみました。

11
ParPar

Omar（またはMahendra）のソリューションをさらに普遍的にするためには、FireFoxに関連するコードブロックを次のように置き換える必要があります。

/* Firefox */
display:flex;
justify-content:center;
align-items:center;

それ以外の点では機能的な、Omarのコードの問題は、ボックスを画面の中央に配置する場合、または直近の先祖に配置する場合に発生します。このセンタリングは、その位置を

position: relative;またはposition:static;（位置には含まれません：絶対または固定）。

そして margin：auto; または margin-right：auto。マージン左：自動。

このボックス中心整列環境の下では、オマルの提案はうまくいきません。 IE8でも動作しません（それでも7.7％の市場シェア）。そのため、IE8（および他のブラウザ）では、上記の他の解決策に見られるような回避策を検討する必要があります。

11
user2931920

複数行が必要な場合は、これが最も簡単な方法です。 spanのテキストを別のspanで囲み、その高さをline-heightで指定します。複数行へのトリックは内側のspanのline-heightをリ​​セットすることです。

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

デモ

もちろん、外側のspanはdivでもwhathaveyouでも構いません。

4
Hashbrown

CSS #column-content strongにも垂直方向の配置を追加します。

#column-content strong {
    ...
    vertical-align: middle;
}

更新された例 も参照してください。

===アップデート===

他のテキストと別の垂直方向の配置を囲むようにします。

html：

... <span>yet another text content that should be centered vertically</span> ...

css：

#column-content span {
    vertical-align: middle;
}

次の例 も参照してください。

3
scessor