Soru Bir resmin yanındaki metni dikey hizala?


Neden olmasın vertical-align: middle iş? Ve henüz, vertical-align: top  yapar iş.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

1686
2018-01-28 21:01


Menşei


İşte ilginç bir yazı: anlayış vertical-align - Phaedrus
Kesinlikle CSS'ye bir dil açısından giremez ve savunamazsınız, ama bir çok hayal kırıklığım, sadece içeriğinizin içinde bulunduğunuz tarayıcıya bağlı olarak belirli özelliklerin çalışmasından kaynaklanıyor. Günümüzde bile modern "tarayıcı savaşları" standartları en iyi kimin takip ettiği hakkında daha fazla bilgi var, hala uyarılar bol ve gerçekten özellik listesini sınırlıyor. - Mattygabe
Heresy: <td> img </ td> <td valign = "orta"> metin </ td> - T4NK3R
648+ kişi benim deli olduğumu düşünecek ama kabul edilen cevap benim için işe yaramadı. Ancak bu ... <div> <img stili = "genişlik: 30 piksel; yükseklik: 60 piksel; dikey hiza: orta"> <span stili = "yükseklik: 60 piksel; dikey hizalama: orta"> İşler. </ Span > </ div> - Zach


Cevaplar:


Aslında, bu durumda oldukça basit: görüntüye dikey hizalamayı uygulayın. Hepsi bir satırda olduğu için, metne değil, hizalanmasını istediğiniz görüntü gerçekten.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

FF3'te test edilmiştir.

Artık bu tür düzen için flexbox'ı kullanabilirsiniz.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


1902
2018-01-28 21:10



IE 6 & 7'de test edilmiştir. - Ben
“Her şey bir satırda olduğu için, metinde değil, hizalanmasını istediğiniz görüntü gerçekten.” - Hayır, görüntü nerede olduğu iyi. Metnin hizalanmasını istiyoruz. Görüntü değil. - Bunun işe yaradığını anladım (bazı durumlarda, örneğin: görüntüde şamandıra: solda değilken), ama metni dikey ortalığa hareket ettirmek sadece tuhaf ve kasıtsızdır. Bunun yerine resmin yanında bir özellik uygulamak zorunda kalacaktı. - BrainSlugs83
@ BrainSlug83 Kesinlikle tuhaf değil ama yeni gelenlerin bunu nasıl tetikleyebileceğini görebiliyorum. Varsayılan olarak, metin taban çizgisine bir görüntü yerleştirilir. Yaptığınız tek şey görüntünün metne göre eklendiği yere hareket ediyor. Şamandıra kullanırken: sol, bunu hem görüntü hem de metin içeren blokta ya da metnin kendisinde yapıyor olmalısınız. - jamesrom
@ BrainSlugs83 Karşı-sezgisel olarak görülebileceğini kabul etti. Biraz zihinsel bir değişim gerektirir, çünkü CSS'ye göre yapmanız gereken şey görüntüyü metne ortalamaktır. Resme gönderilen metin değil. - Greg Pettit
Artırırsanız işe yaramaz span yazı Boyutu. Görmek cevabım. - Mori


İşte dikey hizalama için bazı basit teknikler:

Tek satır dikey hizalama: orta

Bu kolay: Metin öğesinin satır yüksekliğini kapsayıcınınkiyle aynı olacak şekilde ayarlayın.

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Birden çok satır dikey hizalama: alt

Kesinlikle bir iç parçasını kabına göre konumlandırın

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Çoklu çizgi dikey hizalama: orta

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

IE'nin eski sürümlerini desteklemeniz gerekiyorsa <= 7

Bunu yönetim kurulunda düzgün bir şekilde çalıştırabilmek için CSS'yi biraz kesmek zorunda kalacaksınız. Neyse ki, bizim lehimize çalışan bir IE hata var. Ayar top:50% konteynerde ve top:-50% iç div üzerinde, aynı sonucu elde edebilirsiniz. İki, IE'nin desteklemediği başka bir özelliği kullanarak birleştirebiliriz: gelişmiş CSS seçiciler.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Değişken konteyner yüksekliği dikey-hiza: orta

Bu çözüm, diğer çözümlerden biraz daha modern bir tarayıcı gerektirir. transform: translateY özelliği. (http://caniuse.com/#feat=transforms2d)

Aşağıdaki 3 satır CSS öğesini bir öğeye uygulamak, ana öğenin yüksekliğinden bağımsız olarak onu dikey olarak merkezde ortalayacak:

position: relative;
top: 50%;
transform: translateY(-50%);

317
2018-01-28 21:45



display:table ve display:table-cell CSS seçiciler, tabii ki, IE7 ve altında, harika çalışıyorlar. Birkaç saat boyunca saçlarımı yırttıktan sonra, hala IE7 kullanan biriyle uğraşmaya gerçekten gerek olmadığına karar verdim. - banncee
display:table çeşitli tarayıcılarda bazı sınırlamalar vardır (IE11'de max-height öğe bir tablo hücresindeyse işe yaramıyor), bu nedenle bazı kenar durumlarda, tablo hücrelerini kullanarak dikey olarak hizalamak iyi bir fikir değildir. - jahu
Internet Explorer RACE'DE REST EDİN - Ĭsααc tիε βöss


Değiştir div esnek bir kaba

div {display:flex;}


Artık tüm içerik için hizalamaları ortalamak için iki yöntem var:

Yöntem 1:

div {align-items:center;}

DEMO 


Yöntem 2:

div * {margin-top:auto; margin-bottom:auto;}

DEMO 


Farklı genişlik ve yükseklik değerlerini deneyin. img ve farklı yazı tipi boyutu değerleri span ve her zaman konteynerin ortasında kaldıklarını göreceksiniz.


79
2018-03-24 07:54



Bu Firefox'ta benim için harika çalıştı! ... ama Chrome'da çalışmıyor gibi görünüyor (42 sürümünü kullanıyor) - Chris
Chrome'un en son sürümü 42.0.2311.90 m'de sorunsuz çalışıyor. - Mori
Farklı yazı tipi boyutlarıyla çalışan en basit yol - woojoo666
Metni resimlerin yanında veya arasında ortalamak için (sayfada yatay olarak), ayrıca eklemeniz gerekir justify-content: center; ve boşluk için (<br/> etiketlerini kullanmadan) padding: 1em;. Modern tarayıcı devleri için büyük güncelleme. - CSS
Teşekkür ederim. Her ne sebeple olursa olsun, benim için işe yarayan tek cevap budur (bunun dışında, yukarıdakiler). - inspirednz


Başvurmalısın vertical-align: middle her iki öğeye de mükemmel bir şekilde ortalanmış.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

kabul edilen cevap simgesinin yanında bulunan metnin x-yüksekliğinin yarısı kadar çevrilir ( CSS özellikleri). Hangi yeterince iyi olabilir, ancak metin, üstte veya altta ayakta yükselenler veya inişler varsa, biraz kapalı görünebilir:

centered icon comparison

Solda, metin hizalanmamış, sağda yukarıda gösterildiği gibi. Bu canlı bir demo bulunabilir dikey hizalama ile ilgili makale.

Neden hakkında konuştu? vertical-align: top senaryoda çalışır? Sorudaki görüntü muhtemelen metinden daha uzun ve dolayısıyla satır kutusunun üst kenarını tanımlar. vertical-align: top açıklık elemanında sadece satır kutusunun üstünde konumlandırır.

Arasındaki davranıştaki temel fark vertical-align: middle ve top ilk olarak kutuların temel çizgisine göre hareket eder (tüm dikey hizalamaları gerçekleştirmek için gereken yere yerleştirilir ve böylece daha çok hissedilir) öngörülemeyen) ve satır kutusunun dış sınırlarına göre ikinci (daha somut olan).


68
2017-09-11 12:58



Aslında bu cevap, kabul edilen cevabın mega artmasına rağmen bana gerçekten yardımcı oldu. Thanx! - Bernoulli IT
Bu gerçekten mükemmel bir cevaptır. Her zaman dikey-merkezsiz problemin gerçekten hile olmadan çözülemeyeceğini varsaydım. - Brad
Katılıyorum, bu cevap temiz ve kolaydı ve işe yaradı. Ayrıca tutarsız destekli css3 vb. - Lizardx
Bu, farklı yazı tipi boyutları ile iyi çalışır. - Robert Moore
En iyi işleri ve alt eserleri fark ettim ama ortada değil. Temel olarak "orta", üst ve alt arasında yarı olarak tanımlanmamıştır. Daha çok "metinden daha uzun olduğu zaman, her iki yoldan da eşit olarak" anlamına gelir. Ve burada dikey hizalamaya ihtiyacınız yok: metnin ortasında, sadece görüntüde. - Curtis


Kabul edilen cevapta kullanılan teknik sadece tek çizgili metinler için geçerlidir (gösteri), ancak çok satırlı metin (gösteri) - orada belirtildiği gibi.

Herkesin çok çizgili metni bir görüntüye dikey olarak dikmesi gerekiyorsa, burada birkaç yol vardır (Yöntem 1 ve 2'den esinlenerek bu CSS-Tricks makalesi)

Yöntem # 1: CSS tabloları (KEMAN) (IE8 + (kullanabilirmiyim))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Yöntem # 2: Kapsayıcıdaki sözde öğe (KEMAN) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Yöntem # 3: Flexbox (KEMAN) (kullanabilirmiyim)

CSS (Yukarıdaki keman satıcı öneklerini içerir):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

47
2017-12-24 21:06



# 1 yöntemi mükemmel çalışıyor! 2 tane tane vardı - biri metin - başka - bir görüntü. Ve şimdi ikisi de dikey olarak ortalanmışlar. Ve çok kolay. FF34.0.5 ve IE8'de test edilmiştir. Gerçekten teşekkürler. - Ernestas Gruodis
Yöntem, metnin metinden daha büyük (yükseklikte) olması durumunda iyi çalışır. Ama eğer görüntü küçükse, ama sonuncusu ne yazık ki başarısız - Thomas


Bu kod IE'de olduğu gibi FF'de de çalışır:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

23
2017-07-02 14:41



Bu, 2009'da verilen cevap ile aynı cevap değil miydi? - Mr Lister
Evet ... ama kodlamayı önlemek için "auto" küçük değişiklik - HTMLnewBie


Çünkü sen line-height çalışmak için div boyuna kadar


16
2018-01-28 21:05



Ve yine, bunu tablolarda yapmak "dikey hizalama: merkez" ile elde edilebilirdi. CSS darbeler. - sam
Hat yüksekliğini 30px'e ayarlamayı denedim ve hala çalışmıyor. - sam


Temel olarak, CSS3'e geçmeniz gerekecek.

-moz-box-align: center;
-webkit-box-align: center;

9
2017-11-29 18:24





Kayıt için, "komutlar" hizalaması bir SPAN üzerinde çalışmamalıdır, çünkü bir Çizgide etiket, bir değil blok düzeyi etiket. Hizalama, kenar boşluğu, dolgu vb. Gibi şeyler, satır içi noktası metin akışını bozmayacağından, bir satır içi etiket üzerinde çalışmayacaktır.

CSS, HTML etiketlerini iki gruba ayırır: satır içi ve blok düzeyinde. "CSS blogu vs inline" ara ve harika bir makale ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Çekirdek CSS prensiplerini anlamak oldukça sinir bozucu olmamanın bir anahtarıdır)


8
2017-11-18 13:24



text-align ve vertical-align (uygulaması dışında td eski amaçlar için öğeler) özellikle inline ve inline-block elementler (span, img, vb). - Kevin Peno