html - vertical-alignとは




CSSを使用してテキストを垂直方向に配置する方法を教えてください。 (20)

私はテキストを含むdiv要素を持っており、このdivの内容を垂直に中央に揃えたいと考えています。

ここで私のdivスタイルです:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

これを行う最善の方法は何ですか?


1行のテキスト(または1文字)の場合、この手法を使用できます。

#boxが固定でなく、 相対的な高さが%である場合に使用できます。

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

JsBin (CSSの編集が簡単)またはJsFiddle (結果フレームの高さの変更が容易)のライブデモを参照してください。

CSSではなくHTMLで内部テキストを配置する場合は、追加のインライン要素にテキストコンテンツをラップし、それに合わせて#box::afterを編集する必要があります。 (もちろん、 content:プロパティは削除する必要があります。)
例えば、
<div id="box"><span>TextContent</span></div>
この場合#box::after#box span置き換えて#box span

IE8をサポートするには、 :: with :置き換える必要があります。


CSS3で導入されたFlexboxはソリューションです:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

:テキストを中央に配置する場合は、重要とマークされた上の行を次のいずれかの行に置き換えます。

1)垂直方向のみ:

margin: auto 0;

2)水平方向のみ:

margin: 0 auto;

更新 :私が気づいたように、このトリックはグリッド(ディスプレイ:グリッド)でも動作します。


このソリューションをお試しください:

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

CSS +を使用して構築されました。


すべてのあなたの垂直方向の整合の必要性のために!

このMixinを宣言する:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

あなたの要素にそれを含める:

.element{
    @include vertical-align();
}

絶対配置と伸張

上記の方法と同様に、相対位置と絶対位置としてそれぞれ親要素と子要素の位置を設定することから始めます。 そこからは物事が異なります。

下のコードでは、垂直方向のセンタリングのみの方法を使用することはできますが、このメソッドをもう一度水平方向と垂直方向の両方に配置しました。

html

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

このメソッドのアイデアは、上、下、右、左の値を0に設定して、子要素を4つの辺すべてに伸ばしてみようとすることです。子要素は親要素よりも小さいため、すべて到達できません4つのエッジ。

しかし、4辺すべてでマージンをautoに設定すると、マージンが等しくなり、親divの中央に子divが表示されます。

残念ながら、上記はIE7以下では機能しません。また、以前の方法のように、子div内のコンテンツが大きくなりすぎて隠すことができません。


この基本的なアプローチを試すことができます:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

しかし、行の高さを格納するボックス要素と同じ高さに設定しているため、1行のテキストに対してのみ機能します。

より多様なアプローチ

これはテキストを垂直に整列させる別の方法です。 このソリューションは、1行と複数行のテキストで機能しますが、それでも固定高さのコンテナが必要です。

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

CSSは<div>サイズを調整し、 <span>高さを<div>の線の高さと同じに設定して<span>vertical-align: middle<span>vertical-align: middleインラインブロックにします。 次に、 <span>に対してline-heightをnormalに戻します。その内容はブロック内で自然に流れます。

表の表示をシミュレートする

また、別のオプションがあります。これはdisplay: table-cellサポートしていない古いブラウザdisplay: tabledisplay: table-cell (基本的にInternet Explorer 7のみ))では動作しない可能性がありdisplay: table-cell 。 CSSを使用してテーブルの動作をシミュレートします(表は垂直方向の配置をサポートしているため).HTMLは2番目の例と同じです:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

絶対配置を使用する

このテクニックでは、上下左右の0に設定された絶対配置要素を使用します。詳細については、Smashing Magazineの「CSSの絶対水平および垂直センタリング 」の記事を参照してください。


すべてのクレジットはこのリンクの所有者@SebastianEkströmLinkに送られます。 これを通過してください。 それを行動codepen見てください。 上記の記事を読んで私はデモ・フィドルも作成しまし

CSSの3行だけで(ベンダープレフィックスを除く)、トランスフォームの助けを借りて行うことができます。translateYは、高さがわからなくても、必要なものを垂直に配置します。

CSSプロパティの変換は通常、要素の回転と拡大縮小に使用されますが、translateY関数を使用すると、要素を垂直方向に揃えることができます。 通常、これは絶対位置指定や行の高さの設定で行う必要がありますが、要素の高さを知るか、単一行のテキストのみで作業する必要があります。

したがって、これを行うには次のように記述します。

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

それだけで十分です。 これは、絶対位置メソッドと同様の手法ですが、要素の高さや親の位置プロパティを設定する必要はありません。 これは、 Internet Explorer 9でもすぐにInternet Explorer 9ます。

さらに簡単にするために、ベンダープレフィックスを持つmixinとして記述することができます。


より新しいブラウザでは、CSSの計算機能がサポートされるようになりました。 これらのブラウザをターゲットにしている場合は、次のようなことを調べることができます。

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

キーはstyle = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" 相対的な位置にある親div内にある


センターを垂直に配置するための非常にシンプルで最も強力なソリューション:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>


以下のプロパティを使用することもできます。

display: flex; 
align-content: center; 
justify-content : center;

別の方法:

div height属性を設定しないで、代わりにpadding:を使用して効果を達成します。 line-heightと同様に、1行のテキストがある場合にのみ機能します。 この方法では、コンテンツがさらに多い場合でもテキストは中央に配置されますが、div自体はわずかに大きくなります。

だから行くのではなく:

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

あなたは言うことができます:

div {
   padding: 60px 0; //Maybe 60 minus font-size divided by two, if you want to be  exact
}

これによりdiv上下のpadding60pxに設定され、左右のpaddingがゼロに設定され、 div 120px(フォントの高さ)が高くなり、テキストがdivの中央に垂直に配置されます。


参考にし、より簡単な答えを加える:

純粋なCSS:

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

またはSASS / SCSSミックスインとして:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

利用者:

.class-to-center {
    @include vertical-align;
}

SebastianEkströmのブログ記事では、CSSの3行で垂直整列を行う

この方法は、要素が「ハーフピクセル」に配置されているため、要素がぼやけてしまう可能性があります。 これに対する解決策は、その親要素をpreserve-3dに設定することです。 次のように:

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

私たちは2015+に住み、 Flexの主要なすべての現代のブラウザがFlex Boxをサポートしています。

これは、ウェブサイトがここから作られる方法です。

勉強しなさい!


次のCSSコードを追加すると簡単にこれを行うことができます:

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

つまり、CSSは次のようになります。

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


次のコードは、画面サイズまたはdivサイズに関係なくdivを画面の中央に配置します。

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

flex詳細はhereをご覧ください。


次のコードスニペットを参照として使用できます。 それは私の魅力のように働いています:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

上記のコードスニペットの出力は次のとおりです。

ソースコードのクレジット: codepuran.com/web-designing/… codepuran.com/web-designing/…


私は@michielvooからの答えを拡張して、行の高さとdivの高さの呼吸の必要性を解放したいと考えています。 これは基本的には次のような単純化されたバージョンです:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

注: divを囲むfixed-heightには、 css一部をコメントアウトする必要があります。


私は以前の答えを見て、彼らは画面の幅(応答しない)のためにのみ動作します。 応答性が高いためにはflexを使用する必要があります。

例:

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

私は誰もwriting-modeルートを行ったことを確信していませんが、私はそれが問題をきれいに解決し、 広いサポートを持っていると思います:

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

これはもちろん、必要なあらゆる次元で動作します(親の100%以外)。 境界線のコメントを外すと、慣れ親しむことができます。

JSFiddleのデモで 、あなたのために手伝ってください。

Caniuseのサポート :85.22%+ 6.26%= 91.48% (IEでも!)


縦方向の中央のスタイルが必要な場合は、 display:table-cellvertical-align:middle display:table-cellを試すことができます。

例:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>


.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>





vertical-alignment