Görüntünün yanındaki metni dikey olarak hizalamak istiyor musunuz?

Neden vertical-align: middleçalışmaz? Yine vertical-align: top de işe yarıyor.

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Aslında, bu durumda oldukça basittir: görüntüye dikey hizalama uygulayın. Hepsi tek bir satırda olduğundan, metin değil, hizalamak istediğiniz görüntüdür.

<!-- 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 bir 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>

Dikey hizalama için bazı basit teknikler:

Tek satır dikey hizalama: orta

Bu kolaydır: metin öğesinin satır yüksekliğini kabınkine eşit olacak şekilde ayarlayın

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

Çok satırlı dikey hizalama: alt

Bir iç div'i kabına göre kesinlikle yerleştirin

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

Çok satırlı 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>

Eski IE sürümlerini desteklemeniz gerekiyorsa <= 7

Bunun kartta doğru bir şekilde çalışmasını sağlamak için CSS'yi biraz kesmek zorunda kalacaksınız. Neyse ki, lehimize çalışan bir IE hatası var. Ayar top:50%kabın üzerine ve top:-50%iç div üzerinde, aynı sonucu elde edebilirsiniz. İkisini IE'nin desteklemediği başka bir özelliği kullanarak birleştirebiliriz: gelişmiş CSS seçicileri.

<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 hizalama: orta

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

Bir öğeye aşağıdaki 3 CSS satırının uygulanması, üst öğenin yüksekliğine bakılmaksızın öğeyi dikey olarak üst öğesi içinde ortalar:

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

Yaptığınız değişiklik divbir esnek kaba:

div { display:flex; }

Artık tüm içeriğin hizalamalarını 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 imgve farklı yazı tipi boyutu değerlerini deneyin ve spanher zaman kabın ortasında kaldıklarını göreceksiniz.

vertical-align: middleMükemmel ortalanması için her iki öğeye de başvurmanız gerekir.

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

Kabul edilen cevap , simgeyi yanındaki metnin x yüksekliğinin yarısı kadar ortalar ( CSS özelliklerinde tanımlandığı gibi ). Metinde üstte veya altta öne çıkan yükselenler veya alçalmalar varsa, bu yeterince iyi olabilir, ancak biraz görünebilir:

Solda metin hizalı değil, sağda yukarıda gösterildiği gibi. Bu makalede dikey hizalama hakkında canlı bir demo bulunabilir .

vertical-align: topSenaryoda neden işe yaradığını kimse konuştu mu? Sorudaki görüntü muhtemelen metinden daha uzundur ve bu nedenle çizgi kutusunun üst kenarını tanımlar. vertical-align: topsonra span öğesinde sadece satır kutusunun en üstüne yerleştirir.

Arasındaki davranış temel fark, vertical-align: middleve topkutunun taban çizgisine göre (ki tüm dikey hizalamalar yerine getirmek için gerekli olan her yerde yerleştirilir ve bu sayede oldukça hisseder ilk hareket elemanlarının olduğu tahmin edilemez ) ve satır kutusunun dış sınırları için ikinci nispi (ki daha somut).

Kabul edilen cevap kullanılan teknik yalnızca tek çizgili metin (çalışır demo ) değil, çok satırlı metin ( demo ) - orada belirtildiği gibi.

Çok çizgili bir metni bir görüntüye dikey olarak ortalamak gerekirse, işte birkaç yol ( Bu CSS-Tricks makalesinden esinlenen Yöntem 1 ve 2 )

Yöntem # 1: CSS tabloları ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

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

Yöntem # 2: Kaptaki sözde öğe ( FIDDLE ) (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 ( FIDDLE ) ( caniuse )

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

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

Bu kod IE ve FF'de çalışır:

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

Çünkü line-heightbunun çalışması için div yüksekliğine ayarlamanız gerekir

Temel olarak, CSS3'e inmeniz gerekecek.

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

Kayıt için, hizalama "komutları" bir SPAN üzerinde çalışmamalıdır, çünkü satır düzeyinde bir etikettir, blok düzeyinde bir etiket değildir. Hizalama, kenar boşluğu, dolgu vb. Satır içi etiket üzerinde çalışmaz çünkü satır içi nokta metin akışını bozmaz.

CSS, HTML etiketlerini iki gruba ayırır: satır içi ve blok düzeyi. Arama "css blok vs satır içi" ve harika bir makale ortaya çıkıyor ...

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

(Temel CSS ilkelerini anlamak, bu kadar can sıkıcı olmamasının anahtarıdır)

line-height:30pxMetin için görüntüyle hizalanacak şekilde yayılma alanı için kullanın :

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

Yapabileceğiniz başka bir şey, metnin line-heightiçindeki görüntülerin boyutuna ayarlanmasıdır <div>. Ardından görüntülerivertical-align: middle;

Bu gerçekten en kolay yol.

İle bir çözüm görmedim marginBu cevapların hiçbirinde henüz , işte bu soruna benim çözümüm.

Bu çözüm yalnızca görüntünüzün genişliğini biliyorsanız çalışır.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

background:url(../images/red_bullet.jpg) left 3px no-repeat;

Yerine genellikle 3px kullanıyorum top. Bu değeri artırarak / azaltarak, görüntü istenen yüksekliğe değiştirilebilir.

Bu yayılma özelliklerini yazın

span{
    display:inline-block;
    vertical-align:middle;
}

Özellik özelliğini display:inline-block;kullandığınızda kullanın.vertical-align

Resmi özelliği inline elementkullanarak ayarlayabilirsinizdisplay

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Örneğin, jQuery mobile'daki bir düğmede, görüntüye bu stili uygulayarak biraz değiştirebilirsiniz:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Çok satırlı çözüm:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Tüm tarayıcılarda ve ie9 + 'da çalışır

Kafa karıştırıcı olabilir, katılıyorum. Tablo özelliklerini kullanmayı deneyin. Bu basit CSS hilesini, modals'ı web sayfasının ortasına yerleştirmek için kullanıyorum. Geniş tarayıcı desteğine sahiptir:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

ve CSS kısmı:

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

İstediğiniz gibi çalışması için görüntü ve tablo kabının boyutunu ayarlamanız ve ayarlamanız gerektiğini unutmayın. Zevk almak.

Öncelikle satır içi CSS hiç tavsiye edilmez, gerçekten HTML'nizi bozar.

Görüntü ve açıklığı hizalamak için basitçe yapabilirsiniz vertical-align:middle.

.align-middle {
  vertical-align: middle;
}

<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Neden navigasyonunuzun tarayıcısında oluşturulmadığından emin değilim, ancak normalde görüntü ve ortalanmış bir metin içeren bir başlık görüntülemeye çalışırken böyle bir snippet kullanıyorum, umarım yardımcı olur!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; 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;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

Muhtemelen bunu istersiniz:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Diğerlerinin önerdiği gibi, vertical-alignresmi deneyin :

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

CSS sinir bozucu değil. Sadece belgeleri okumuyorsunuz . P