Mengapa tidak't vertical-align: middle
bekerja? 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's cukup sederhana: menerapkan menyelaraskan vertikal untuk gambar. Sejak itu's semua dalam satu baris, it's benar-benar gambar yang anda inginkan selaras, 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 di FF3.
Sekarang anda dapat menggunakan flexbox untuk jenis tata letak.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Berikut ini adalah beberapa teknik sederhana untuk vertical-align:
Yang satu ini adalah mudah: mengatur tinggi baris teks elemen yang sama dari wadah
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Benar-benar posisi batin div relatif terhadap kontainernya
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
Dalam rangka untuk mendapatkan ini untuk bekerja dengan benar di papan, anda'll harus hack CSS sedikit. Untungnya, ada sebuah bug IE yang bekerja dalam mendukung kami. Pengaturan top:50%
pada wadah dan top:-50%
pada batin div, anda dapat mencapai hasil yang sama. Kita bisa menggabungkan dua menggunakan fitur lain YAITU doesn't dukungan: advanced CSS.
<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>
Solusi ini membutuhkan sedikit lebih modern browser daripada solusi lain, karena itu membuat penggunaan transform: translateY
properti. (http://caniuse.com/#feat=transforms2d)
Menerapkan berikut 3 baris CSS untuk elemen akan secara vertikal pusat itu dalam induk terlepas dari ketinggian elemen induk:
position: relative;
top: 50%;
transform: translateY(-50%);
Mengubah anda div
ke dalam wadah flex:
div {display:flex;}
Sekarang ada dua metode untuk pusat keberpihakan untuk semua konten:
Metode 1:
div {align-items:center;}
[DEMO][1]
Metode 2:
div * {margin-top:auto; margin-bottom:auto;}
[DEMO][2]
Mencoba berbagai lebar dan tinggi nilai-nilai pada img
dan ukuran font yang berbeda nilai-nilai pada span
dan'll melihat mereka selalu tetap di tengah-tengah wadah.
Anda harus menerapkan vertical-align: middle
untuk kedua elemen untuk memilikinya telah 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 center ikon sekitar setengah dari x-height teks di samping itu (sebagaimana didefinisikan dalam CSS spesifikasi). Yang mungkin cukup baik tetapi dapat terlihat sedikit off, jika teks telah ascenders atau descenders berdiri hanya di atas atau di bawah:
Di sebelah kiri, teks tidak selaras, di sebelah kanan itu adalah seperti yang ditunjukkan di atas. Live demo dapat ditemukan dalam artikel tentang vertical-align.
Apakah ada yang berbicara tentang mengapa vertical-align: top
bekerja dalam skenario? Gambar di pertanyaan ini mungkin lebih tinggi dari teks dan dengan demikian mendefinisikan atas tepi garis kotak. vertical-align: top
pada elemen span maka hanya posisi di atas garis kotak.
Perbedaan utama di antara perilaku vertical-align: middle
dan top
adalah yang pertama bergerak elemen relatif terhadap kotak's baseline (yang ditempatkan dimanapun diperlukan untuk memenuhi semua vertikal keberpihakan dan dengan demikian merasa agak tak terduga) dan yang kedua relatif terhadap luar batas garis kotak (yang lebih nyata).
Teknik yang digunakan dalam jawaban yang diterima hanya bekerja untuk satu-berbaris teks ([demo][1]), tapi tidak multi-line text ([demo][2]) - seperti yang dicatat di sana.
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
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 */
}
CSS (di atas biola mengandung vendor prefiks):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
Sebagai catatan, keselarasan "perintah" tidak't bekerja pada RENTANG waktu, karena itu adalah in-line tag, bukan blok-tingkat tag. Hal-hal seperti alignment, margin, padding, dll won't bekerja pada aplikasi yang di-tag line karena titik inline tidak mengganggu aliran teks.
CSS membagi tag HTML menjadi dua kelompok: di-line dan blok-tingkat. Pencarian "blok css vs inline" dan sebuah artikel muncul...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Pengertian CSS inti prinsip ini adalah kunci untuk itu tidak begitu mengganggu)
Belum't melihat solusi dengan margin
di salah satu dari jawaban-jawaban ini belum, jadi di sini adalah saya solusi untuk masalah ini.
[Solusi][1] hanya bekerja jika anda mengetahui lebar dari gambar anda.
<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>
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;
}
Anda dapat mengatur gambar sebagai inline elemen
menggunakan display
property
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
Multiline solusi:
<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+
Hal ini dapat membingungkan, saya setuju. Mencoba memanfaatkan fitur tabel. Saya menggunakan CSS sederhana trik untuk posisi modals di tengah halaman web. Ini memiliki besar dukungan browser:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
dan CSS bagian:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Perhatikan bahwa anda harus gaya dan menyesuaikan ukuran gambar dan tabel wadah untuk membuatnya bekerja seperti yang anda inginkan. Menikmati.
Pertama inline CSS tidak dianjurkan pada semua, itu benar-benar mengacaukan HTML anda.
Untuk menyelaraskan gambar dan span, anda hanya dapat melakukan 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 hal itu doesn't membuat itu pada anda, navigasi's browser, tapi saya biasanya menggunakan potongan seperti ini ketika mencoba untuk menampilkan header dengan gambar dan berpusat pada teks, harap ini 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>