Bagaimana cara menyelaraskan sesuatu secara vertikal di dalam tag rentang?

Bagaimana cara mendapatkan "x" untuk disejajarkan secara vertikal di tengah rentang?

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

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

Gunakan line-height:50px;bukan tinggi. Itu harus melakukan trik;)

Ketahuilah bahwa line-heightpendekatan ini gagal jika Anda memiliki kalimat yang panjang karena spanmelanggar batas karena tidak ada cukup ruang. Dalam hal ini, Anda akan memiliki dua garis dengan celah dengan ketinggian N piksel yang ditentukan di properti.

Saya terjebak di dalamnya ketika saya ingin menunjukkan gambar dengan teks terpusat vertikal di sisi kanannya yang berfungsi dalam aplikasi web responsif. Sebagai basis saya menggunakan pendekatan yang disarankan oleh Eric Nickus dan Felipe Tadeo.

Jika Anda ingin mencapai:

dan ini:

.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>

Ini adalah cara paling sederhana untuk melakukannya jika Anda membutuhkan banyak baris. Bungkus spanteks Anda dengan yang lain spandan tentukan tingginya line-height. Trik untuk beberapa baris adalah ulang batin 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

Tentu saja bagian luar spanbisa menjadi divatau apa yang Anda miliki

Cara flexbox:

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

Saya membutuhkan ini untuk tautan, jadi saya membungkus rentang dengan a-tag dan div, kemudian memusatkan span tag itu sendiri

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%;
}

Gambar dan teks tengah vertikal CSS

Saya telah membuat satu demo untuk pusat gambar dan teks vertikal dan saya juga menguji firefox, chrome, safari, internet explorer 9 dan 8 juga.

Ini sangat singkat dan mudah css dan html, Silakan periksa kode di bawah ini dan Anda dapat menemukan output di screenshort.

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;
    }

Keluaran masukkan deskripsi gambar di sini

ini bekerja untuk saya (Keltex mengatakan hal yang sama)

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

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

Atribut vertical-align css sayangnya tidak melakukan apa yang Anda harapkan. Artikel ini menjelaskan 2 cara untuk menyelaraskan elemen secara vertikal menggunakan css.

Atur padding-top menjadi nilai yang tepat untuk menekan x ke bawah, lalu kurangi nilai yang Anda miliki untuk padding-top dari ketinggian.