Soru Metni CSS ile dikey olarak nasıl ortalarım?


Metin içeren div öğem var ve bu divın içeriğini dikey olarak hizalamak istiyorum.

İşte benim div tarzım:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Bunu yapmanın en iyi yolu nedir?


1811
2018-01-14 21:25


Menşei


olası kopyası Metni css ile dikey olarak nasıl ortalarım - leonbloy
olası kopyası Bir sayfada <div> dikey ve yatay olarak ortalamanın en iyi yolu nedir? - Dan Dascalescu
W3C referansı: w3.org/Style/Examples/007/center.en.html - nu everest
Modern yol: kullanım esnek - Mistalis
Bu sayfadaki kod snippet'leri sizin için çalışacaktır: codepuran.com/web-designing/... - Akshay Pethani


Cevaplar:


Bu temel yaklaşımı deneyebilirsiniz:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Sadece tek bir metin satırı için çalışır, çünkü satırın yüksekliğini içeren kutu elemanı ile aynı yüksekliğe ayarlarız.


Daha çok yönlü bir yaklaşım

Bu, metni dikey olarak hizalamanın başka bir yoludur. Bu çözüm, tek bir satır ve birden çok metin satırı için çalışacaktır, ancak yine de sabit bir yükseklikte kapsayıcı gerektirir:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

CSS sadece boyutları <div>, dikey olarak merkezi hizalar <span> ayarlayarak <div>çizgisi yüksekliğe eşittir ve <span> bir satır içi bloğu vertical-align: middle. Sonra satır yüksekliğini tekrar normal olarak ayarlar. <span>Böylece, içeriği doğal olarak bloğun içinde akacaktır.


Tablo görüntüsünü simüle etme

Ve işte, daha büyük çalışmayabilir başka bir seçenek desteklemeyen tarayıcılar display: table ve display: table-cell (sadece Internet Explorer 7). CSS kullanarak tablo davranışını simüle ediyoruz (tablolar dikey hizalamayı desteklediğinden) ve HTML ikinci örnekle aynıdır:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


Mutlak konumlandırmayı kullanma

Bu teknik, en üst, alt, sol ve sağa doğru bir şekilde yerleştirilmiş bir öğe kullanır. Smashing Magazine'deki bir makalede daha ayrıntılı olarak açıklanmıştır. CSS'de Mutlak Yatay ve Dikey Merkezleme.


2452
2018-03-06 08:15



Çünkü div veya metin değişir veya daha fazla içerik eklenirse yanlış olur. - Rob
Ama bu onun ne kadar çok metin kullanacağını bilirseniz, bu çözümün daha esnek olduğunu söyledi. - acSlater
Firefox 22.0'ımda sadece 3. yaklaşım iyi çalışıyor, ancak tüm tarayıcılarda çalışmaz. İlk 2 yaklaşım, div için yükseklik boyutunu değiştirdikten sonra düzgün çalışmayı durdurur - YMC
Div'in yüksekliği ile aynı hedefe nasıl ulaşabilirim: "height: 100%;" ? - Fedor
table-cell Teknik oldukça güzel, ancak içerik daha sonra ana kabı sığacak şekilde yeniden boyutlandırılıyor. İşte, sahte eleman kullanarak CSS Tricks'ten harika bir teknik. before: css-tricks.com/centering-in-the-unknown . İçerik bu şekilde yeniden boyutlandırılmaz, ancak yalnızca IE8 + 'da çalışır. - Ian Campbell


Başka bir yol (henüz burada belirtilmemiş) ile flexbox'a.

Sadece aşağıdaki kodu ekleyin konteyner öğe:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexbox demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Alternatif olarak, içeriği konteyner, flexbox ayrıca bir esnek madde bir ile otomatik kenar boşluğu  esnek kapta sadece bir esnek öğe olduğunda (Yukarıdaki soruda verilen örnek gibi).

Bu yüzden esnek öğeyi hem yatay hem de dikey olarak ortalamak için margin:auto

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Yukarıdakilerin tümü, bunları ortaya koyarken, ortalamaları ortalamak için geçerlidir. yatay satırlar. Bu aynı zamanda varsayılan davranıştır, çünkü varsayılan olarak flex-direction olduğu row. Bununla birlikte, esnek öğelerin ortaya konması gerekiyorsa dikey kolonlar, sonra flex-direction: column ana ekseni sütun olarak ayarlamak için kapta ve ayrıca justify-content ve align-items özellikler şimdi çalışıyor diğer türlü ile justify-content: center dikey olarak merkezleme ve align-items: center yatay olarak merkezleme

flex-direction: column gösteri

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Bazı özellikleri görmek ve maksimum tarayıcı desteği için sözdizimi almak için Flexbox ile başlamak için iyi bir yer flexyboxes 

Ayrıca, bugünlerde tarayıcı desteği çok iyi: kullanabilirmiyim

Tarayıcılar arası uyumluluk için display: flex ve align-items, aşağıdakileri kullanabilirsiniz:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

960
2018-01-14 21:29



Flexbox destek tablosu - user
+1, div'ler ekranın tüm genişliğini aldığında iyi çalışır - Andrew Bringaze
Bu benim için de iyi çalışıyor, yukarıdakilerin geri kalanı sitemde çalışmıyor. Ancak görsel stüdyo tanımıyor display: flex. - Antonio Ooi
IE = asla güzel şeyler yapamayız - Andrew Hoffman
BU BOMB IS! Bu, Chrome ve Android Chrome tarayıcılarında bir patron gibi çalışır. - Frank


Aşağıdaki parça CSS kodunu ekleyerek bunu kolayca yapabilirsiniz:

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

Bu, CSS'nizin nihayetinde göründüğü anlamına gelir:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


110
2017-10-25 18:12



Buna rağmen, marj özelliklerini öldürüyor. - Tim
Bu çözümün IE7'yi desteklemediğini unutmayın. - mrtsherman
@mrtsherman Ya da, IE7 bu çözümü desteklemiyor. ;-) - James McLaughlin
@Costa - Bu divanın içinde bir şey yüzüyorsanız, ebeveyni de yüzmek zorunda kalabilirsiniz. stackoverflow.com/questions/2062258/... - Ian Campbell
Devre dışı min-heigth. - Penguin


Referans için ve daha basit bir cevap eklemek için:

Saf CSS:

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

Veya SASS / SCSS Mixin olarak:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Tarafından kullanım:

.class-to-center {
    @include vertical-align;
}

Sebastian Ekström'ün blog yazısı tarafından Sadece 3 satır CSS ile dikey hizalama:

Bu yöntem, elemanların “yarım piksel” üzerine yerleştirilmeleri nedeniyle bulanıklaşmasına neden olabilir. Bunun için bir çözüm, ana elemanını 3d-korumaya ayarlamaktır. Aşağıdaki gibi:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

2015'te yaşıyoruz ve Flex Kutusu her büyük modern tarayıcı tarafından desteklenmektedir.

Web sitelerinin buradan çıkış yolu olacak.

Öğren!


97
2017-08-11 11:59



Saf CSS: benim için hile yaptı, ama bir şekilde kullanmak zorundaydım absolute konumlandırma .. - d4Rk
@ D4Rk ile aynı sorunu yaşadım. Benim (blok) konteynerin göreceli konumlandırması ve yüksekliği vardı ve dikey merkezlemeye (madde) ihtiyaç duyan maddenin kesinlikle konumlandırılması gerekiyordu. Ne karmaşık / basit bir sorun! İşte bir sonraki CSS sürümünde basit / basit bir düzeltme var. - Vanessa King


Tüm kredi bu bağlantı sahibine gidiyor @Sebastian Ekström bağlantı; lütfen bunun üzerinden geçin. Eylemde görün codepen. Yukarıdaki makaleyi okuyarak da oluşturdum bir demo keman.

Sadece üç satır CSS ile (satıcı önekleri hariç) bunu bir dönüşümün yardımıyla yapabiliriz: translateY Yüksekliğini bilmese bile istediğimiz her şeyi dikey olarak merkezler.

CSS özellik dönüşümü genellikle döner ve ölçekleme elemanları için kullanılır, ancak translateY işleviyle öğeleri dikey olarak hizalayabiliriz. Genellikle bu, mutlak konumlandırma veya satır yükseklikleri ayarlama ile yapılmalıdır, ancak bunlar öğenin yüksekliğini bilmenizi veya yalnızca tek satırlı metinlerde çalışmanızı gerektirir.

Yani, bunu yapmak için şunu yazıyoruz:

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

İhtiyacın olan her şey bu. Mutlak-pozisyon yöntemine benzer bir tekniktir, ancak üst kısımda üst öğe üzerinde eleman veya konum-özelliği üzerinde herhangi bir yükseklik ayarlamak zorunda kalmamaktır. Kutuda düz şekilde çalışır, hatta Internet Explorer 9!

Bunu daha da basit hale getirmek için, satıcı önekleriyle bir miks olarak yazabiliriz.


49
2017-12-13 20:09



En az test yaptım, ama benim için çalışıyor gibi görünüyor! - Iain Collins
Yazı tipi boyutunu değiştirerek her yerde hareket eder - Jon49


CSS3'te tanıtılan Flexbox'lar çözüm:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Not: Metni ortalamak istiyorsanız, yukarıdaki satırlardan biri ile önemli olarak işaretlenen satırı değiştirin:

1) Sadece dikey olarak:

margin: auto 0;

2) Sadece yatay olarak:

margin: 0 auto;

GÜNCELLEŞTİRME: Fark ettiğim gibi, bu numara da ızgaralarla (ekran: ızgara) çalışır.


22
2017-08-28 10:11



Bu durumda, bu paragrafın neden paragrafın merkezileşmesi üzerinde etkili olduğunu açıklar mısınız? - elena
@elena Aslında tam olarak nedenini bilmiyorum, denediğimde keşfettim. Ancak, daha yeni CSS sürümleri için dikkate alınacaktır. Örneğin, bu durumda ekranı ızgaraya değiştirirseniz, flexbox'larla aynı şekilde çalışılacaktır. Izgaralar ve esnek kutular, önceki CSS hatalarını telafi etmek için yeni özellikler ile birlikte geliyor; ve bu hile bunlardan biri. - MAChitgarha


Esnek yaklaşım

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


13
2018-06-29 09:26





Cevap olarak kabul edilen çözüm, kullanım için mükemmeldir. line-height div yüksekliği ile aynıdır, ancak metin sarıldığında VEYA iki satırda olduğunda bu çözüm mükemmel çalışmaz.

Metin sarılırsa veya div içinde birden çok satır varsa bunu deneyin.

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

Daha fazla referans için bkz:


13
2018-04-15 08:28