Luruskan teks di sebelah gambar secara vertikal?

Kenapa tidak vertical-align: middlebekerja? Namun, vertical-align: top tidak bekerja.

span{
  vertical-align: middle;
}

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

Sebenarnya, dalam hal ini cukup sederhana: terapkan perataan vertikal ke gambar. Karena semuanya dalam satu baris, itu benar-benar gambar yang ingin Anda selaraskan, bukan teks.

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

Diuji dalam FF3.

Sekarang Anda dapat menggunakan flexbox untuk jenis tata letak ini.

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

Berikut adalah beberapa teknik sederhana untuk meluruskan vertikal:

Garis vertikal satu garis: tengah

Ini mudah: atur ketinggian baris elemen teks agar sama dengan yang ada pada wadah

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

Multiple-lines vertical-align: bottom

Benar-benar posisikan div batin relatif ke wadahnya

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

Multiple-lines vertical-align: tengah

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

Jika Anda harus mendukung versi kuno IE <= 7

Agar ini berfungsi dengan benar, Anda harus sedikit meretas CSS. Untungnya, ada bug IE yang berfungsi untuk kita. Pengaturan top:50%pada wadah dan top:-50%pada div bagian dalam, Anda dapat mencapai hasil yang sama. Kita dapat menggabungkan keduanya menggunakan fitur lain yang tidak didukung IE: penyeleksi CSS tingkat lanjut.

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

Tinggi wadah variabel, luruskan vertikal: tengah

Solusi ini memerlukan peramban yang sedikit lebih modern daripada solusi lain, karena memanfaatkan transform: translateYproperti. ( http://caniuse.com/#feat=transforms2d )

Menerapkan 3 baris CSS berikut ini ke suatu elemen akan secara vertikal menempatkannya di dalam induknya terlepas dari tinggi elemen induknya:

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

Ubah Anda divmenjadi wadah fleksibel:

div { display:flex; }

Sekarang ada dua metode untuk memusatkan perataan untuk semua konten:

Metode 1:

div { align-items:center; }

DEMO

Metode 2:

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

DEMO

Coba nilai lebar dan tinggi berbeda pada imgdan nilai ukuran font berbeda pada spandan Anda akan melihat mereka selalu tetap di tengah wadah.

Anda harus menerapkan vertical-align: middleke kedua elemen untuk membuatnya terpusat dengan sempurna.

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

The jawaban yang diterima tidak pusat ikon sekitar setengah dari x-height dari teks di samping itu (sebagaimana didefinisikan dalam spesifikasi CSS ). Yang mungkin cukup baik tetapi dapat terlihat sedikit aneh, jika teks memiliki ascenders atau descenders yang berdiri tepat di atas atau bawah:

Di sebelah kiri, teks tidak sejajar, di sebelah kanan seperti pada gambar di atas. Demo langsung dapat ditemukan di artikel ini tentang perataan-vertikal .

Adakah yang pernah membicarakan mengapa ini vertical-align: topberhasil dalam skenario? Gambar dalam pertanyaan mungkin lebih tinggi daripada teks dan dengan demikian menentukan tepi atas kotak baris. vertical-align: toppada elemen span lalu posisikan saja di bagian atas kotak garis.

Perbedaan utama dalam perilaku antara vertical-align: middledan topadalah bahwa elemen bergerak pertama relatif terhadap garis dasar kotak (yang ditempatkan di mana pun diperlukan untuk memenuhi semua keberpihakan vertikal dan dengan demikian terasa agak tidak dapat diprediksi ) dan relatif kedua terhadap batas luar kotak garis (yang merupakan lebih nyata).

Teknik yang digunakan dalam jawaban yang diterima hanya berfungsi untuk teks baris tunggal ( demo ), tetapi tidak teks multi-baris ( demo ) - seperti yang dicatat di sana.

Jika ada yang perlu memusatkan teks multi-baris vertikal ke gambar, berikut adalah beberapa cara (Metode 1 dan 2 terinspirasi oleh artikel Trik CSS ini )

Metode # 1: Tabel CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

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

Metode # 2: Elemen pseudo pada wadah ( 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 */
}

Metode # 3: Flexbox ( FIDDLE ) ( caniuse )

CSS (Biola di atas berisi awalan vendor):

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

Kode ini berfungsi di IE dan juga FF:

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

Karena Anda harus mengatur line-heightketinggian div agar ini berfungsi

Pada dasarnya, Anda harus turun ke CSS3.

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

Sebagai catatan, penyelarasan "perintah" tidak boleh bekerja pada SPAN, karena ini adalah in-line tag , bukan tag level blok . Hal-hal seperti perataan, margin, bantalan, dll tidak akan berfungsi pada tag in-line karena titik inline tidak mengganggu aliran teks.

CSS membagi tag HTML menjadi dua kelompok: in-line dan block-level. Cari "css block vs inline" dan sebuah artikel bagus muncul ...

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

(Memahami prinsip-prinsip inti CSS adalah kunci untuk tidak terlalu menyebalkan)

Gunakan line-height:30pxuntuk rentang sehingga teks sejajar dengan gambar:

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

Hal lain yang dapat Anda lakukan adalah mengatur teks line-heightke ukuran gambar di dalam<div> . Kemudian atur gambar kevertical-align: middle;

Itu sungguh cara termudah.

Belum melihat solusi dengan marginjawaban ini, jadi inilah solusi saya untuk masalah ini.

Solusi ini hanya berfungsi jika Anda tahu lebar gambar Anda.

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;

Saya biasanya menggunakan 3px sebagai pengganti top. Dengan menambah / mengurangi nilai itu, gambar dapat diubah ke ketinggian yang diperlukan.

Tulis properti rentang ini

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

Gunakan display:inline-block;Ketika Anda menggunakan vertical-alignproperti. Itu adalah properti terkait

Anda dapat mengatur gambar sebagai inline elementmenggunakan displayproperti

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

Pada sebuah tombol di jQuery mobile, misalnya, Anda dapat mengubah sedikit dengan menerapkan gaya ini pada gambar:

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

Solusi multiline:

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

Bekerja di semua browser dan ie9 +

Ini bisa membingungkan, saya setuju. Coba gunakan fitur tabel. Saya menggunakan trik CSS sederhana ini untuk memposisikan modals di tengah halaman web. Ini memiliki dukungan browser yang besar:

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

dan bagian CSS:

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

Perhatikan bahwa Anda harus menata dan menyesuaikan ukuran gambar dan wadah tabel agar berfungsi sesuai keinginan Anda. Nikmati.

Pertama CSS inline tidak dianjurkan sama sekali, itu benar-benar mengacaukan HTML Anda.

Untuk menyelaraskan gambar dan rentang, Anda cukup melakukannya 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>

Tidak yakin mengapa itu tidak merendernya di browser navigasi Anda, tapi saya biasanya menggunakan snippet seperti ini ketika mencoba untuk menampilkan header dengan gambar dan teks terpusat, semoga membantu!

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>

<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>

Anda mungkin menginginkan ini:

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

Seperti yang disarankan orang lain, coba vertical-alignpada gambar:

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

CSS tidak mengganggu. Anda hanya tidak membaca dokumentasinya . ; P