Bir span etiketi içindeki bir şeyi dikey olarak nasıl hizalarım?

"X" in açıklığın ortasında dikey olarak hizalanmasını nasıl sağlayabilirim?

.foo {
    height: 50px;
    border: solid black 1px;
    display: inline-block;
    vertical-align: middle;
}

<span class="foo">
   x
</span>

line-height:50px;Yükseklik yerine kullanın . Bu hile yapmalı;)

Unutmayın line-heightEğer uzun bir cümle varsa yaklaşım başarısız spanyeterli alan olmadığı için çizgi çiğnemesini. Bu durumda, özellikte belirtilen N piksel yüksekliğine sahip bir boşluk içeren iki satırınız olur.

Duyarlı bir web uygulamasında çalışan, sağ tarafında dikey olarak ortalanmış bir metin olan bir görüntüyü göstermek istediğimde buna takılı kaldım. Temel olarak Eric Nickus ve Felipe Tadeo tarafından önerilen yaklaşımı kullanıyorum.

Başarmak istiyorsanız:

ve bu:

.container {
    background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
    display: inline-block;
    background-size: 40px 40px; /* image's size */
    height: 40px; /* image's height */
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}

.container span {
    height: 40px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}

<span class="container">
    <span>This is a centered sentence next to an image</span>
</span>

Birden fazla hatta ihtiyacınız varsa bunu yapmanın en basit yolu budur. spanMetninizi başka bir metne sarın spanve yüksekliğini ile belirtin line-height. Birden çok satıra hile iç sıfırlıyor span's line-height.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

DEMO

Tabii ki dış taraf spanbir divya da ne olabilir

Flexbox yolu:

.foo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

Bağlantılar için buna ihtiyacım vardı, bu yüzden aralığı bir a-etiketi ve bir div ile sardım ve ardından span etiketinin kendisini ortaladım

HTML

<div>
    <a class="tester" href="#">
        <span>Home</span>
    </a>
</div>

CSS

.tester{
    display: inline-block;
    width: 9em;
    height: 3em;
    text-align: center;
}
.tester>span{
    position: relative;
    top: 25%;
}

CSS dikey merkez resmi ve metni

Dikey görüntü merkezi ve metin için bir demo oluşturdum, ayrıca firefox, chrome, safari, internet explorer 9 ve 8 üzerinde de testlerim var.

Çok kısa ve kolay css ve html, Lütfen aşağıdaki kodu kontrol edin ve çıktıyı ekran görüntüsünde bulabilirsiniz.

HTML

<div class="frame">
    <img src="capabilities_icon1.png" alt="" />
</div>

CSS

  .frame {
        height: 160px;      
        width: 160px;
        border: 1px solid red;
        white-space: nowrap;
        text-align: center; margin: 1em 0;
    }

    .frame::before {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content:"";
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
    }

Çıktı görüntü açıklamasını buraya girin

bu benim için çalışıyor (Keltex de aynısını söyledi)

.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle; 
}

<span class="foo"> <span>middle!</span></span>

Dikey hizalı css özelliği maalesef beklediğiniz şeyi yapmaz. Bu makale , css kullanarak bir öğeyi dikey olarak hizalamanın 2 yolunu açıklar.

X'i aşağı itmek için padding-top'ı uygun bir değer olacak şekilde ayarlayın, ardından padding-top için sahip olduğunuz değeri yükseklikten çıkarın.