it-swarm-tr.com

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

İki resimli bir div'im ve bir de h1. Hepsinin div içinde, yan yana, dikey olarak hizalanması gerekir.

Görüntülerden birinin div içine yerleştirilmiş absolute olması gerekiyor.

Bunun tüm ortak tarayıcılarda çalışması için gereken CSS nedir?

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

Vay canına, bu problem popüler. vertical-align özelliğindeki bir yanlış anlama dayanmaktadır. Bu mükemmel makale onu açıklar:

vertical-align öğesinin veya "İçeriğin Dikey Olarak Merkezlenmesinin (Nasıl) Değil)" Gavin Kistner tarafından.

“CSS'de nasıl merkezlenir”, farklı durumlar için gerekli CSS merkezleme niteliklerini bulmanıza yardımcı olan harika bir web aracıdır.


Kısaca (ve bağlantı çürüklüğünü önlemek için):

  • Satır içi elemanları (ve sadece satır içi elemanları), bağlamlarında vertical-align: middle aracılığıyla dikey olarak hizalanabilir. Ancak, “bağlam” tüm üst konteyner yüksekliği değil, içinde bulundukları metin satırının yüksekliğidir. jsfiddle example
  • Blok elemanlar için dikey hizalama daha zordur ve kesinlikle özel duruma göre değişir:
    • İç elemanın bir sabit yüksekliği olabilirse, absolute konumunu yapabilir ve height, margin-top ve top konumunu belirleyebilirsiniz. jsfiddle örneği
    • Ortalanmış öğe tek bir satırdan oluşuyorsa ve üst yüksekliği sabittir kabın yüksekliğini doldurmak için kabının line-height değerini ayarlayabilirsiniz. Bu yöntem benim tecrübelerime göre çok yönlü. jsfiddle örneği
    • … Daha özel durumlar var.
816
Konrad Rudolph

Ş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;
}
109
E. Serrano

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.

104
user2346571

Benim için çalıştı:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
44
Romain
 .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

21
abernier

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%);
}
16
Blacksonic

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>
16
Shog9

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>
15
Anita Mandal

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/

11
joan16v

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/

10
Shadowbob

Öğ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.

3
Dashrath

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>
3
Mike Tunnicliffe

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ç

 Result

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

3
Henk-Martijn

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!

2
Shivam

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>
1
Stephen

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!

1
Joel Moses

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.

0
BernieSF

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;
}
0
danigonlinea

Öğ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>
0
WasiF

Ebeveyn divinde merkez çocuk div yapmanın 3 yolu

  • Mutlak Konumlandırma Yöntemi
  • Flexbox Yöntemi
  • Dönüştür/Çevir Yöntemi

    enter image description here

    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>
0
Vahid Akhtar

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>
0
Arsh