Bir div öğesinde dikey hizalama elemanları nasıl yapılır?

Şimdi flexbox desteği artıyor, içerdiği öğeye uygulanan bu CSS içerilen öğeyi dikey olarak ortalayacak:

.container {        
    display: flex;
    align-items: center;
}

Explorer 10 ve daha eski (<4.4) Android tarayıcılarını da hedeflemeniz gerekiyorsa, önceden eklenmiş sürümü kullanın:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Bu çok basit kodu kullandım:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Açıkçası, eğer bir .class veya bir #id kullanıyorsanız, sonuç değişmeyecektir.

Benim için çalıştı:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Bir arkadaşımdan bir teknik:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO burada

Blok elemanlarını merkeze yerleştirmek için (IE9 ve daha üst sürümlerde çalışır), bir sarmalayıcı div gerekir:

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

Hepsinin div içinde dikey olarak hizalanması gerekir

Hizalanmış how ? Görüntülerin üst kısımları metnin üstü ile aynı hizada mı?

Görüntülerden birinin div içine mutlak yerleştirilmesi gerekir.

Kesinlikle DIV'ye göre konumlandırılmış mı? Belki de aradığınızı çizebilirsin ...?

fd tanımlamıştır mutlak konumlandırma için adımlar, ayrıca H1 öğesinin görüntüsünü, görüntüler onunla aynı çizgide görünecek şekilde ayarlar. Bunun için, vertical-align stilini kullanarak görüntüleri hizalayabileceğinizi ekleyeceğim:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... bu, üstbilgileri üst üste gelecek şekilde başlık ve görüntüleri birleştirir. Diğer hizalama seçenekleri var; belgelere bakın . DIV'i bırakmanın ve görüntüleri H1 öğesinin içine taşımanın yararlı olacağını da bulabilirsiniz - bu, kabın içine semantik değer sağlar ve H1 görüntüsünü ayarlama gereksinimini ortadan kaldırır:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Bu formülü kullanın ve her zaman çatlak olmadan çalışacaktır:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For Explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For Explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Hile, div'in içine 1 satır ve 1 sütun içeren bir tablo koymak, genişlik ve yükseklik% 100 olarak ayarlamak ve dikey hizalama özelliğini kullanmaktır: orta.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Keman: http://jsfiddle.net/joan16v/sbqjnn9q/

Hemen hemen tüm yöntemlerin yüksekliği belirtmesi gerekir, ancak çoğu zaman herhangi bir yüksekliğimiz yoktur.
Yani burada yüksekliği bilmek gerektirmeyen bir CSS3 3 çizgi numarası.

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

IE9'da bile desteklenir.

satıcı önekleriyle:

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

Kaynak: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Öğenin boyutunu hesaplamak ve sonra alt öğeyi buna göre konumlandırmak için bir CSS işlevi hesaplaması kullanabiliriz.

Örnek HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Ve CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Burada oluşturulan demo: https://jsfiddle.net/xnjq1t22/

Bu çözüm, duyarlı divheight ve width ile de iyi çalışır.

Not: calc işlevi, eski tarayıcılarla uyumluluk açısından test edilmemiştir.

Varsayılan olarak h1 bir blok elemanıdır ve ilk img'den sonra satırda işleyecektir ve ikinci img'nin bloğu izleyen satırda görünmesine neden olacaktır.

Bunu önlemek için h1'i satır içi akış davranışına sahip olacak şekilde ayarlayabilirsiniz:

#header > h1 { display: inline; }

İmg 'nin div ' nin içine kesinlikle konumlandırılmasıyla ilgili olarak, div'in düzgün çalışması için div'i "bilinen bir boyuta" ayarlaması gerekir. Tecrübelerime göre, konum özelliğini varsayılan - konum: göreceli işler için değiştirmelisiniz:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Bunu başarabilirseniz, istediğiniz efekti elde etmek için gereken minimum öznitelikleri elde etmek için, div.header'deki yükseklik, genişlik, konum niteliklerini kademeli olarak kaldırmayı denemek isteyebilirsiniz.

GÜNCELLEME:

Firefox 3'te çalışan tam bir örnek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

Dikey merkeze CSS kullanarak, dış kapların bir masa gibi ve içeriğin bir masa hücresi gibi hareket etmesine izin verebilirsiniz. Bu formatta nesneleriniz merkezde kalacaktır. :)

Örnek olarak JSFiddle'da birden fazla nesneyi iç içe geçirdim, ancak temel fikir şöyle:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Birden çok nesne örneği:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Sonuç

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Bugün itibariyle, CSS3 kullanarak bir div'deki birden fazla metin satırını dikey olarak hizalamak için yeni bir geçici çözüm buldum (ve ayrıca kullanıcı arayüzünü güzelleştirmek için bootstrap v3 ızgara sistemini kullanıyorum).

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Anladığım kadarıyla, metin içeren öğenin derhal üst öğesinin bir yüksekliği olmalıdır. Umarım size de yardımcı olur. Teşekkürler!

Bunu yapmak için yeni favori yolum bir CSS şebekesiyle:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Sadece div içinde bir hücreli masa kullanın! Sadece hücre ve masa yüksekliğini ayarlayın ve% 100'e ayarlayın ve dikey hizalamayı kullanabilirsiniz.

Divin içindeki tek hücreli bir masa dikey hizalamayı kullanır ve Taş Devri ile geriye doğru uyumludur!

Benim için bu şekilde çalıştı:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

"A" öğesi, Bootstrap sınıflarını kullanarak bir düğmeye dönüştürülmüş ve şimdi dikey olarak bir dış "div" içinde ortalanmıştır.

Bu benim bir div içindeki i elementi için kişisel çözümüm.

JSFiddle Örneği

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Öğeleri dikey ve yatay olarak hizalamanın iki yolu vardır.

1. Önyükleme 4.3.X

dikey hizalama için: d-flex align-items-center

yatay hizalama için: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}

<div class="container">
  <div class="child">I am in Center</div>
</div>

Ebeveyn divinde merkez çocuk div yapmanın 3 yolu

• Mutlak Konumlandırma Yöntemi
• Flexbox Yöntemi

• Dönüştür/Çevir Yöntemi

  Deneme

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Bir yılı aşkın bir süredir aşağıdaki çözümü kullanıyorum (konumlandırma ve çizgi yüksekliği olmadan), IE 7 ve 8 ile de çalışıyor.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>