Nasıl alabilirim "x" dikey hizalama span ortasında olmak mı?

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

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

Bu unutmayınline-heightyaklaşım yeterli alan yok çünkü satır sonu varsa hangi zaman dilimi içinde uzun bir cümle varsa başarısız olur. Bu durumda, N piksel özelliğinde belirtilen yüksekliği ile bir boşluk ile iki satır olurdu.

Duyarlı bir web uygulaması olarak çalışan sağ tarafında dikey olarak ortalanmış bir metin ile bir görüntü göstermek istedim zaman içine soktum. Temel olarak bu yaklaşım Eric Nickus ve Felipe Tadeo tarafından önerilen kullanın. Eğer elde etmek istiyorsanız:

ve:

BuCSS:

.container {
    background: url( "<PATH_TO_IMAGE>" ) 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;
}

Ve buHTML:

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

Demo