Div içindeki öğeleri dikey hizalama

İki resim ve bir h1 . Hepsinin div içinde, yan yana dikey olarak hizalanması gerekir.

Görüntülerden birinin absolutediv içinde konumlandırılması gerekir .

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

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

Vay be, bu sorun popüler. vertical-alignMülkiyet bir yanlış anlama dayanmaktadır . Bu mükemmel makale bunu açıklıyor:

vertical-alignGavin Kistner tarafından Anlama veya "İçeriği Dikey Olarak Nasıl Ortalamalı?"

“CSS'de nasıl ortalanır?” , Farklı durumlar için gerekli CSS merkezleme niteliklerini bulmaya yardımcı olan harika bir web aracıdır.

Özetle _{^{(ve bağlantı çürümesini önlemek için)}} :

• Satır içi elemanlar (ve sadece satır içi elemanlar) aracılığıyla bağlamlarında dikey olarak hizalanabilir vertical-align: middle. Ancak, "bağlam" ana kap yüksekliğinin tamamı değil, içinde bulundukları metin satırının yüksekliğidir. Jsfiddle örneği
• Blok elemanlar için dikey hizalama daha zordur ve belirli bir duruma bağlıdır:
  • İç eleman bir olabilir varsa sabit yüksekliği , konumunu yapabilir absoluteve bunun belirtmek height, margin-topve toppozisyon. jsfiddle örneği
  • Ortalanmış öğe tek bir satırdan oluşuyorsa ve üst yüksekliği sabitse , kabın line-heightyüksekliğini dolduracak şekilde ayarlayabilirsiniz . Bu yöntem benim tecrübelerime göre oldukça çok yönlü. jsfiddle örneği
  • … Daha özel durumlar var.

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

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

Explorer 10 ve eski (<4.4) Android tarayıcıları da hedeflemeniz gerekiyorsa, ön ekli 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ı, ister a .classister bir kullanın #id, sonuç değişmez.

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 öğelerini merkeze konumlandırmak için (IE9 ve üzeri sürümlerde çalışır), bir sarıcıya ihtiyaç duyar div:

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

Hepsinin div içinde dikey olarak hizalanması gerekir

Nasıl hizalandı ? Görüntülerin üst kısımları metnin üst kısmına hizalandı mı?

Görüntülerden birinin div içinde mutlak olarak konumlandırılması gerekir.

Kesinlikle DIV göre konumlandırılmış? Belki de aradığınızı çizebilirsiniz ...?

fd tanımladı mutlak konumlandırma için adımların yanı sıra, H1öğenin görüntüsünü satır içinde görünecek şekilde ayarlamayı da açıkladı. Buna, vertical-alignstili kullanarak görüntüleri hizalayabileceğinizi ekleyeceğim :

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

... bu, üst kenarları hizalanmış olarak üstbilgi ve görüntüleri bir araya getirir. Diğer hizalama seçenekleri mevcuttur; belgelere bakın . DIV'yi bırakıp görüntüleri H1öğenin içine taşımanın da yararlı olduğunu görebilirsiniz - bu, kaba anlamsal değer sağlar ve aşağıdakilerin görüntüsünü ayarlama ihtiyacını ortadan kaldırır H1:

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

Bu formülü kullanın ve her zaman çatlak olmadan çalışı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>

Hemen hemen tüm yöntemlerin yüksekliği belirtmesi gerekir, ancak çoğu zaman yüksekliğimiz yoktur.
Yani, yüksekliği bilmek zorunda olmayan bir CSS3 3 hat 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/

Öğeleri iki şekilde dikey ve yatay olarak hizalayabilirsiniz

1. Bootstrap 4
2. CSS3

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;  // verticall center
    justify-content: center; // horizontally 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>

Benim hilem div içine 1 satır ve 1 sütun içeren bir tablo koymak, genişlik ve yüksekliğin% 100'ünü ve dikey hizalama: orta özelliğini ayarlamaktır.

<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/

Bir ana div içinde merkezi alt div yapmak için # 3 yol

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

• Dönüştürme / Çevirme Yöntemi

  

  gösteri

/* 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>

CSS'yi dikey merkeze kullanarak, dış kapların bir tablo ve içeriğin bir tablo hücresi gibi davranmasına izin verebilirsiniz. Bu formatta nesneleriniz ortada kalacaktır. :)

Bir örnek için JSFiddle'da birden çok nesne iç içe yerleştirdim, 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/

Varsayılan olarak h1 bir blok öğesidir ve ilk img'den sonra satırda oluşturulur ve ikinci img'in bloğu takip eden satırda görünmesine neden olur.

Bunun olmasını engellemek için h1'i satır içi akış davranışına sahip olacak şekilde ayarlayabilirsiniz:

#header > h1 { display: inline; }

İmg'yi div içinde kesinlikle konumlandırmaya gelince, düzgün çalışmadan önce içeren div'ı "bilinen bir boyuta" ayarlamanız gerekir. Deneyimlerime göre, position özniteliğini de varsayılan konumdan değiştirmelisiniz - position: relative works benim için:

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

Bunu çalıştırabilirseniz, istediğiniz efekti elde etmek için gereken minimum özellikleri elde etmek için yükseklik, genişlik, konum niteliklerini div.header'dan aşamalı olarak kaldırmayı deneyebilirsiniz.

GÜNCELLEME:

İşte 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>

Öğenin boyutunu hesaplamak ve sonra alt öğeyi buna göre konumlandırmak için bir CSS işlev 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;
}

Demo burada oluşturuldu: https://jsfiddle.net/xnjq1t22/

Bu çözüm, duyarlı div heightvewidth iyi çalışır.

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

Bugüne göre, CSS3 kullanarak bir div içindeki birden çok metin satırını dikey olarak hizalamak için yeni bir geçici çözüm buldum (ve ayrıca UI'yi güzelleştirmek için bootstrap v3 ızgara sistemini kullanıyorum), aşağıdaki gibi:

.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 hemen üst öğesinin biraz yüksekliği olmalıdır. Umarım sana da yardımcı olur. Teşekkürler!

Bunu yapmanın en sevdiğim yolu bir CSS ızgarası:

/* 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 tek hücreli bir tablo kullanın! Sadece hücre ve tablo yüksekliğini ayarlayın ve% 100 ile dikey hizalamayı kullanabilirsiniz.

Div içindeki tek hücreli bir tablo, dikey hizalamayı işler ve Taş Devri ile geriye doğru uyumludur!

Bir yıldan beri aşağıdaki çözümü (konumlandırma ve çizgi yüksekliği olmadan) kullanıyorum, 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>

Bu, div içindeki bir i öğesi 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;
}

Benim için şu ş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>

Bootstrap sınıfları kullanılarak bir düğmeye dönüştürülen "a" öğesi ve şimdi dış "div" içinde dikey olarak ortalanmıştır.

display flex kullanarak, önce hizalamak istediğiniz öğenin kabını sarmanız gerekir.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

ardından örneğimdeki div div veya outdiv'e aşağıdaki css'yi uygulayın

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

Sadece bu:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Div içindeki tek hücreli bir tablo, dikey hizalamayı işler ve Taş Devri ile geriye doğru uyumludur!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

İşte başka (duyarlı) bir yaklaşım:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Ben sadece web programlamaya giren bir .NET adamıyım. CSS kullanmadım (iyi, biraz). JQuery'nin .css işlevi ile birlikte dikey merkezlemeyi gerçekleştirmek için küçük bir JavaScript kullandım.

Sadece testimdeki her şeyi gönderiyorum. Muhtemelen aşırı zarif değil, ama şimdiye kadar çalışıyor.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

<div id="header" style="display: table-cell; vertical-align:middle;">

...

veya CSS

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

Tarayıcı Kapsamı