Soru Bir
başka bir
içinde yatay olarak nasıl ortalanır?


Yatay olarak nasıl merkezleyebilirim <div> başka bir içinde <div> CSS kullanarak (eğer mümkünse)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>


3636
2018-06-09 08:34


Menşei


Bu harika cevaplardan sadece "#inner" a "width" vermeniz gerektiğini vurgulamak istiyorum, ya da "% 100" olacak ve zaten ortalanmış olup olmadığını anlatamazsınız. - Jony


Cevaplar:


Bu CSS'yi iç kısma uygulayabilirsiniz. <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Tabii ki width için 50%. İçerekten daha küçük herhangi bir genişlik <div> çalışacak. margin: 0 auto gerçek merkezleme nedir.

IE8 + hedefliyorsanız, bunun yerine bunun olması daha iyi olabilir:

#inner {
  display: table;
  margin: 0 auto;
}

İç eleman merkezini yatay hale getirecek ve belirli bir ayarlama yapmadan çalışacaktır. width.

Burada çalışma örneği:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


4097



Dikey merkezleme için genellikle "satır yüksekliği" kullanırım (çizgi yüksekliği == yükseklik). Bu basit ve güzel ama sadece bir satır içeriğiyle çalışıyor :) - Nicolas Guillaume
IE'de iyi çalışması için html sayfanızdaki! DOCTYPE etiketini kullanmalısınız. - Fabio
"Float: none;" eklemek gerekli olabilir. #inner için. - Mert Mertce
Ayrıca, üst ve alt kenar boşluklarını, ilişkisiz olan 0 olarak ayarlarsınız. Daha iyi koyarak margin-left: auto; margin-right: autoBence. - Emmanuel Touzery
Şart değil margin:0 auto: olabilir margin: <whatever_vertical_margin_you_need> auto ikincisi yatay marj. - YakovL


İçte sabit bir genişlik ayarlamak istemiyorsanız div böyle bir şey yapabilirsin:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Bu iç kılar div ile ortalanmış bir satır içi eleman içine text-align.


1111



@ SabaAhang bunun için doğru sözdizimi olurdu float: none; ve muhtemelen sadece gereklidir çünkü #inner bir miras almıştır float birini left veya right CSS'nizdeki başka bir yerden. - Doug McLean
Bu güzel bir çözüm. Sadece içsel mirasın kaldığını aklınızdan çıkarmayın. text-align böylece iç ayarlamak isteyebilirsiniz text-align için initial veya başka bir değer. - pmoleri


En iyi yaklaşımlar CSS 3.

Kutu modeli:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

Kullanılabilirliğinize göre ayrıca box-orient, box-flex, box-direction özellikleri.

Esnek:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Alt öğelerin merkezlenmesi hakkında daha fazla bilgi edinin

Ve Bu, kutu modelinin neden en iyi yaklaşım olduğunu açıklıyor:


299



Aynı zamanda iç divun yüzdüğü zaman benim için de çalışır: sol; - Tareq
Okuduğunuzdan emin olun bu cevap Bu çözümü uygulamaya koymadan önce. - cimmanon
Safari, şu an itibariyle, hala gerektirir -webkit flexbox için bayraklar (display: -webkit-flex; ve -webkit-align-items: center; ve -webkit-justify-content: center;) - Joseph Hansen


Senin div olduğunu varsayalım 200px geniş:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Ana öğenin olduğundan emin olun. konumlandırılmış yani göreceli, sabit, mutlak veya yapışkan.

Eğer divunuzun genişliğini bilmiyorsanız, transform:translateX(-50%); negatif marj yerine.

https://jsfiddle.net/gjvfxxdj/


216



Bu Safari'de çalışmıyor - cesards
Bu özümden hoşlanmıyorum çünkü iç eleman ekran için çok geniş olduğunda, tüm elemanın üzerinde yatay olarak kaydırma yapamazsınız. marj: 0 otomatik daha iyi çalışır. - Aloso
marjı neden sola koyuyorsun: -100, bu işe yaramayacak - Robert Limanto
IE6 / 7'de çalışacak tek yöntem olduğunu okudum. - Andy
kenar boşluğu: otomatik; kenar boşluğu: otomatik; blok seviye elemanı merkezler - unicodexm


Bunu ben yarattım örnek nasıl yapıldığını göstermek için dikine ve yatay  align.

Kod temelde budur:

#outer {
  position: relative;
}

ve...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

ve içinde kalacak center sen bile yeniden boyut senin ekranın.


200



Bu yöntem için +1, bununla cevap vermek üzereydim. Yatay olarak ortalamak istediğiniz öğenin genişliğini bildirmeniz gerektiğini unutmayın (veya dikey olarak ortalarsanız yükseklik). İşte kapsamlı bir açıklama: codepen.io/shshaw/full/gEiDt. Öğeleri dikey ve / veya yatay olarak daha çok yönlü ve yaygın olarak desteklenen yöntemlerden biri. - stvnrynlds
Div içinde dolgu kullanamazsınız, ancak yanılsamayı vermek istiyorsanız aynı renkte bir kenarlık kullanın. - Squirrl
Bence bu yöntemin çalışması için, iç div ile ve yüksekliğini ayarlamanız gerekir. - Nicolas S.Xu


Bazı posterler kullanarak CSS 3 yolunu kullandı display:box.

Bu sözdizimi güncel değil ve artık kullanılmamalıdır. [Ayrıca bakınız bu gönderi].

Bu yüzden sadece bütünlük için CSS 3'ü kullanarak en son yol Esnek Kutu Düzeni Modülü.

Yani, aşağıdaki gibi basit bir işaretleme varsa:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... ve öğelerinizi kutu içinde ortalamak istiyorsanız, üst öğede ihtiyacınız olan şey (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Esnek posta için eski sözdizimini kullanan eski tarayıcıları desteklemeniz gerekiyorsa burada bakmak için iyi bir yer.


158



stackoverflow.com/a/10010055/1312610 - ShibinRagh
"sözdizimi modası geçmiş" ile ne demek istiyorsun, kullanımdan kaldırılmış mı? - Konga Raju
Flexbox spesifikasyonu 3 büyük revizyondan geçti. En son taslak, önceki tüm taslakları resmen tasfiye eden Eylül 2012'den alınmıştır. Ancak, tarayıcı desteği sivilceli (özellikle eski Android tarayıcıları): stackoverflow.com/questions/15662578/... - cimmanon
Bu, Justin Poliey'in sürümü yapmadığında Chrome'da benim için çalıştı. - Vern Jensen
@WouterVanherck bağlıdır flex-direction değer. Eğer 'satır' ise (varsayılan) - o zaman justify-content: center;  yatay hizalama içindir (cevabımda belirttiğim gibi) Eğer 'sütun' ise - o zaman justify-content: center; dikey hizalama içindir. - Danield


Sabit bir genişlik ayarlamak istemiyorsanız ve ekstra marjı istemiyorsanız, ekleyin display: inline-block senin elemanına.

Kullanabilirsiniz:

#element {
    display: table;
    margin: 0 auto;
}

120



Ekran ile aynı gereksinimleri: satır içi bloğu da (quirksmode.org/css/display.html) - montrealmike
Ben de bunu kullandım ama hiç karşılaşmadım display: table; önce. Bu ne işe yarıyor? - Matt Cremeens