web-dev-qa-db-ja.com

Div内のテキストを垂直方向に揃える方法は？

私はテキストをdivに合わせる最も効果的な方法を見つけようとしています。私はいくつかのことを試みましたが、どれもうまくいかないようです。

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
htmlcssvertical-alignment
996
shinjuo

CSSの垂直方向のセンタリング
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

記事の概要

CSS2ブラウザでは、コンテンツを中央に置くためにdisplay:table/display:table-cellを使うことができます。

サンプルは JSFiddle にもあります。

div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

#を使用して新しいブラウザからスタイルを隠すことで、古いブラウザ（IE6/7）のハックをスタイルにマージすることが可能です。

div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>
703
Robert Harvey

line-height属性を追加する必要があり、その属性はdivの高さと一致する必要があります。あなたの場合：

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}
<div class="center">
  A single line.
</div>

実際、おそらくheight属性を完全に削除することができます。

これは 1行のテキストにのみ有効です ただし、注意してください。

680
David

更新 - これは素晴らしいリソースです

http://howtocenterincss.com/ /

CSSを中心に置くことはお尻の痛みです。さまざまな要因に応じて、それを行うには見事な方法があるようです。これによりそれらが統合され、各状況に必要なコードが得られます。

アップデート - Flexboxの使用

最新の技術を使ってこの記事を最新の状態に保つことと連携して、flexboxを使用して何かを中心に置くためのはるかに簡単な方法がここにあります。 FlexboxはIE9 and lowerではサポートされていません。

ここにいくつかの素晴らしいリソースがあります：

ブラウザのプレフィックスが付いたjsfiddle

_ html _ 

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

_ css _ 

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

更新 - 別の解決策

これは zerosixthree からのもので、6行のcssで何でも中心に置くことができます

このメソッドはIE8 and lowerではサポートされていません

jsfiddle

_ html _ 

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

_ css _ 

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

前の答え

マークされた回答内のリンクが少し古くなっているので便利な、シンプルでクロスブラウザのアプローチ。

JavaScriptやCSSの行の高さに頼らずに、順序付けされていないリストとdivの両方でテキストを垂直方向と水平方向に中央揃えする方法 。テキストがいくらあっても、特別なクラスを特定のリストやdivに適用する必要はありません（それぞれのコードは同じです）。これは、IE 9、IE 8、IE 7、IE 6、Firefox、Chrome、Opera、およびSafariを含むすべての主要ブラウザで動作します。最近のブラウザにはないCSSの制限のため、それらを一緒にするための2つの特別なスタイルシート（IE7用とIE6用の1つ）があります。

Andy Howard - 順不同リストまたはdivのテキストを垂直方向および水平方向に中央揃えにする方法

編集： 前回のプロジェクトでIE7/6をあまり気にしていなかったので、少し削除したバージョンを使用しました（つまり、IE7と6で機能するようにしたものを削除しました）。他の人に役立つかもしれません...

jsfiddle

_ html _ 

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>

そしてCSS： 

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}
407
Adam Tomat

display: flexを使えば簡単です。次の方法では、divのテキストは垂直方向の中央に配置されます。

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

そしてあなたが望むなら、水平：

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

必要なブラウザのバージョンを確認する必要があります。古いバージョンではコードは機能しません。

162
Raul Fernandez Marques

ランダム要素を簡単に垂直方向に中央揃えするには、次のようにします。

HTML：

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS：

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

これは私のdivのテキストを高さ200pxの外側のdivの真中の中央に合わせます。ブラウザでこれを機能させるには、ブラウザのプレフィックス（私の場合は-webkit-など）を使用する必要があるかもしれません。

これはテキストだけでなく他の要素にも働きます。

108
Stefan van den Akker

これを行うには、表示を 'table-cell'に設定してvertical-align：middleを適用します。

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

ただし、この抜粋によると、これはInternet Explorerのすべてのバージョンでサポートされているわけではありません。許可なしに http://www.w3schools.com/cssref/pr_class_display.asp からコピーしたものです。

注： 値 "inline-table"、 "table"、 "table-caption"、 "table-cell"、 "table-column"、 "table-column-group"、 "table-row" "、" table-row-group "、および" inherit "は、IE7以前ではサポートされていません。 IE8には！DOCTYPEが必要です。 IE9は値をサポートしています。

次の表に、 http://www.w3schools.com/cssref/pr_class_display.asp からの許容表示値も示します。私はこれが役立つことを願っています

enter image description here

38
Shadrack B. Orina

UPD： この頃はIE6-7-8はもう必要ありません。

表：

.vcenter{
    display: table;
    background:#eee;
    width: 150px;
    height: 150px;
    text-align: center;
}
    
.vcenter :first-child {
    display: table-cell;
    vertical-align: middle;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>

フレックス：

.vcenter{
    display: flex; /* <-- here */
    background:#eee;
    width: 150px;
    height: 150px; /* <-- here */
    align-items: center; /* <-- here */
}
<div class="vcenter">
  <p>This is my Text</p>
</div>

これは（実際には）この問題に対する私のお気に入りの解決策です（シンプルで非常によくブラウザがサポートされています）。

div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br />Text<br />Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>
29
Toni Michel Caubet

これが1行のテキストに最適な解決策です。

行数がわかっている場合は、いくつかの調整を加えて複数行のテキストに対しても機能します。

.testimonialText{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}

これがJSFiddleです

8
Craig
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:250px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>
7
Nikit Barochiya

あなたはflexboxを使ってdivの中で中央のテキストを垂直に整列させることができます。

<div>
   <p class="testimonialText"> This is the testimonial text. </p>
</div>

div {
   display: flex;
   align-items: center;
}

あなたはこのリンクでそれについてもっと学ぶことができます： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ /

7
Cyan Baltazar

この簡単な解決策をチェックしてください。

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

JSFiddle

6
Davors

一つの答えではない私を助けて、これを試して、親divに追加：

display:flex;
align-items:center;
6
Kerim092

これは私が見つけた最もきれいな解決策（IE9 +）で、他の答えが省略したtransform-styleを使うことによる "off by .5 pixel"問題の修正を加えます。

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);    
}

ソース： http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ /

5
Justin

Table/table-cellに頼らずにコンテンツを垂直方向に揃える簡単な方法があります。

http://jsfiddle.net/bBW5w/1/ /

その中に私はコンテナの全体の高さを想定する見えない（width = 0）divを追加しました。

IEとFF（最新バージョン）で動作するようですが、他のブラウザでは確認できませんでした

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

そしてもちろん、CSS：

.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}
5
Earl Hickey

値を知らないという要素に対する簡単な解決策

_ html _ 

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

_ css _ 

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
4
dimitar

グリッドアイテムの余白自動。
flexboxと同様に、グリッドアイテムにmargin-autoを適用すると、両方の軸の中央に配置されます。

.container{
  display: grid;
}
.element{
  margin: auto;
}
3
Sulaymon Hursanov
  h1{
  margin:0;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}
    <div class="container">
            <h1>vertical align text</h1>
    </div>

このトリックでは、左寄せに「left：0」を中央に追加したくない場合は、何でも揃えることができます。

3
Sanjeet kumar

Adam Tomatの回答によると、 div のテキストを揃えるためにjsfiddle example が用意されていました

<div class="cells-block">    
    text<br/>in the block   
</div>

cSSで display：flex を使用する

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* vertically   */
    justify-content: flex-end; /* horisontally */
    text-align: right;         /* addition: for text's lines */
}

もう一つの example と blog の中ではほとんど説明がない。

3
Leon Rom

_ html _ 

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

_ css _ 

 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }
2
ankit sigdel

Flexの使用はブラウザのレンダリングの違いに注意してください。

これはChromeとIEの両方でうまく機能します。

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}
<div class="outer"><div class="inner">Active Tasks</div></div>

Chromeでしか動作しないものと比較してください。

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}
<div class="outer">
<div class="inner"><span style="    margin: auto;">Active Tasks</span></div>
</div>
2
Roman Pokrovskij

CSSグリッドを使用して私のためにそれをやった。

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>
1
ezzato

これは、CSSでcalc()を使用したdivパターンのdivの別のバリエーションです。

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

これはうまくいきます。

  • div内のdivの正確な配置のためのposition:absolute
  • we 知っている 内側のdivの高さは20pxに設定されているので.
  • calc(50% - 10px) for 50％ - 高さの半分 内側のdivを中央揃えにします
1
Stephen Quan

正常に動作します

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

SASS

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

画像タグ<mat-icon>の有無にかかわらず（これはフォントです）

1
V. Kalyuzhnyu

Css flexboxを使用できます。

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
0
Nidhin Joseph

テーブル要素を埋め込むようにしてください。

<div>
    <table style='width:200px; height:100px;'>
        <td style='vertical-align:middle;'>
            copenhagen
        </td>
    </table>
</div>
0
mike

うーん、明らかにこれを解決する方法はたくさんあります。

しかし、<div>は絶対に配置されており、height:100%（実際にはtop:0;bottom:0および固定幅）とdisplay:table-cellはテキストを垂直方向に中央揃えするために機能しませんでした。私のソリューションには内部のspan要素が必要でしたが、他のソリューションの多くも必要であることがわかっているため、追加することもできます。

私のコンテナーは.labelであり、垂直方向に中央に番号を付けたいです。絶対にtop:50%に配置し、line-height:0を設定してそれを行いました

<div class="label"><span>1.</span></div>

CSSは次のとおりです。

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

実際にご覧ください： http://jsfiddle.net/jcward/7gMLx/

0
Jeff Ward