web-dev-qa-db-ja.com

div垂直位置合わせ中央css

私は自分のテキストをabc divのdivの中央のみに垂直に整列させようとしています。

高さを50ピクセルに保ち、テキストをdivの中央で垂直方向に揃えるようにします。

私はまだこの問題の解決策を見つけることができていない、多分私は正しいことを探していません。

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}
<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>
htmlcssvertical-alignment
106
Sickest

あなたはline-height: 50px;を使うことができます、あなたはそこにvertical-align: middle;を必要としません。

デモ

複数の行がある場合、上記は失敗します。その場合は、spanを使用してdisplay: table-cell;とdisplay: table;をvertical-align: middle;と一緒に使用するよりも、width: 100%;を#abcに使用することを忘れないでください。

デモ 

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

私がここで考えることができるもう一つの解決策はtransformが明らかにY軸を表すところでtranslateY()とYプロパティを使うことです。それは非常に簡単です...あなたがする必要があるのはabsoluteからtopに後で位置50%を設定し、その軸から負の-50%に変換することです。

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

デモ

これは、古いブラウザ、たとえばIE 8ではサポートされませんが、IE 9および他の古いブラウザバージョンのChromeおよびFirefoxは、それぞれ-ms, -mozおよび-webkitプレフィックスを使用して作成できます。

transformの詳細については、 here を参照してください。

161
Mr. Alien

それは簡単です：親のdivにこれを与えます：

display: table;

そして、子divにこれを与えます：

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

それでおしまい！

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}
<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>
87
Burak Çanga

昔の質問ですが 最近 CSS3 は実際に垂直方向の配置を作ります 単純 ！

次のcssを#abcに追加するだけです。

display:flex;
align-items:center;

簡単なデモ

元の質問のデモ 更新

簡単な例：

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}
<div class="vertical-align-content">
  Hodor!
</div>
52
Jaqen H'ghar

私はSebastianEkströmによってこの解決策を見つけました。それは速くて汚い、そして本当にうまくいっています。親の身長がわからなくても

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

記事全文を読む ここ .

38
Scott

Lineの高さをdivの高さと同じくらい大きくすることができます。しかし私にとって最良の解決策はこれです - > position:relative; top:50%; transform:translate(0,50%);

7
Andris

line-heightを追加するのはどうですか？

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

フィドル、ラインの高さ

または#abcのpadding。 これはパディングの結果です

更新

あなたのCSSを追加します。

#abc img{
   vertical-align: middle;
}

結果 。あなたが探しているものこれを願っています。

3
Aldi Unanto

これを試して：

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Divをセンタリングするためのもう1つの方法：

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

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}
1
Friend
 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

.text-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="text-align-center"> Align center</div>
0
Fouzia Khan

TranslateY CSSプロパティを使用して、テキストをコンテナの中央に配置します。

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

そしてそれをあなたの収容するDIVに適用します

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

ニーズに合わせて翻訳率を調整してください。お役に立てれば

0
Hondaman900