Bagaimana untuk menyelaraskan vertikal gambar di dalam div
Bagaimana anda dapat menyelaraskan gambar dalam mengandung div
?
Contoh
Dalam contoh saya, saya perlu untuk secara vertikal pusat <img>
di <div>
dengan class ="frame
":
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
.frame
's tinggi adalah tetap dan gambar's tinggi badan yang tidak diketahui. Saya dapat menambahkan unsur-unsur baru dalam .frame
jika's satu-satunya solusi. I'm mencoba untuk melakukan hal ini di Internet Explorer 7 dan kemudian, WebKit, Gecko.
Melihat jsfiddle [di sini][1].
.frame {
height: 25px; /* Equals maximum image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>
1360
35
Satu-satunya (dan yang terbaik cross-browser) cara yang saya tahu adalah dengan menggunakan aplikasi yang
inline-block
penolong denganheight: 100%
danvertical-align: middle
pada kedua elemen.Jadi ada solusi: http://jsfiddle.net/kizu/4RPFa/4570/
Atau, jika anda don't ingin memiliki elemen tambahan di browser modern dan don't pikiran menggunakan Internet Explorer ekspresi, anda dapat menggunakan pseudo-elemen dan menambahkannya ke Internet Explorer menggunakan ekspresi nyaman, yang berjalan hanya sekali per elemen, sehingga tidak ada't menjadi masalah kinerja:
Solusi dengan
sebelum
danungkapan()
untuk Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/Cara kerjanya:
inline-block
unsur-unsur yang dekat satu sama lain, anda dapat menyelaraskan satu sama lain's sisi, sehingga denganvertical-align: middle
anda'll mendapatkan sesuatu seperti ini:px
,mereka
atau lainnya mutlak unit), anda dapat mengatur ketinggian blok batin di%
.inline-block
denganheight: 100%
di blok dengan tetap tinggi akan menyelaraskan laininline-block
elemen di dalamnya (<img/>
dalam kasus anda) secara vertikal dekat ini.Ini mungkin berguna:
Referensi: http://www.student.oulu.fi/~laurirai/www/css/tengah/
matejkramny's solusi adalah awal yang baik, tapi kebesaran gambar memiliki rasio yang salah.
Berikut ini's my garpu:
Demo: https://jsbin.com/lidebapomi/edit?html,css,output
HTML:
CSS:
Tiga line solusi:
Hal ini berlaku untuk apa pun.
Dari di sini.
A murni CSS solusi:
Kunci stuff
Untuk yang lebih modern, solusi, dan jika tidak ada kebutuhan untuk dukungan browser lawas, anda bisa lakukan ini:
Berikut ini's Pen: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
Dengan cara ini anda dapat pusat gambar secara vertikal (demo):
Juga, anda dapat menggunakan Flexbox untuk mencapai hasil yang benar:
Ada super mudah solusi flexbox!
Anda bisa mencoba pengaturan CSS of PI
display: table-cell; vertical-align: middle;
Anda dapat mencoba kode di bawah ini:
Gambar latar belakang solusi
Saya dihapus elemen gambar sama sekali dan mengaturnya sebagai latar belakang div dengan class
.frame
http://jsfiddle.net/URVKa/2/
Ini setidaknya bekerja dengan baik pada Internet Explorer 8, Firefox 6 dan Chrome 13.
Aku memeriksa, dan solusi ini tidak akan bekerja untuk mengecilkan gambar yang lebih besar dari 25 piksel tinggi. Ada properti yang disebut
background-size
yang tidak mengatur ukuran elemen, tetapi itu adalah CSS 3 yang akan konflik dengan Internet Explorer 7 persyaratan.Saya akan saran anda untuk mengulang browser anda prioritas dan desain terbaik untuk browser yang tersedia, atau mendapatkan beberapa server-side code untuk mengubah ukuran gambar jika anda'd ingin menggunakan solusi ini.
Anda bisa lakukan ini:
Demo
http://jsfiddle.net/DZ8vW/1
CSS
JavaScript
http://jsfiddle.net/MBs64/
Kunci tamu adalah
display: table-cell;
untuk.frame
.Div.frame
ditampilkan sebagai inline dengan hal ini, sehingga anda perlu untuk membungkusnya dalam sebuah elemen blok.Ini bekerja di Firefox, Opera, Chrome, Safari dan Internet Explorer 8 (dan kemudian).
UPDATE
Untuk Internet Explorer 7 kita perlu menambahkan CSS expression:
Saya tidak yakin tentang Internet Explorer, tetapi di bawah Firefox dan Chrome, jika anda memiliki sebuah
img
dalamdiv
wadah, berikut CSS konten harus bekerja. Setidaknya bagi saya itu bekerja dengan baik:Coba solusi ini dengan CSS murni http://jsfiddle.net/sandeep/4RPFa/72/
Mungkin itu adalah masalah utama dengan HTML anda. Anda're tidak menggunakan tanda kutip ketika anda mendefinisikan c'lass
&
tinggi gambar` dalam HTML anda.CSS:
Ketika saya bekerja di sekitar dengan
img
tag's meninggalkan 3 piksel untuk 2 piksel ruang dariatas
. Sekarang saya mengurangiline-height
, dan's bekerja.CSS:
Line-height
property yang diberikan berbeda di browser yang berbeda. Jadi, kita harus mendefinisikan berbedaline-height
property browser.Cek contoh ini: http://jsfiddle.net/sandeep/4be8t/11/
Cek ini contoh tentang
line-height
yang berbeda di browser yang berbeda: https://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chromeSolusi saya: [http://jsfiddle.net/XNAj6/2/][1]
Solusi menggunakan tabel dan sel tabel
Kadang-kadang hal itu harus diselesaikan dengan menampilkan seperti tabel/tabel-sel. Misalnya, cepat layar judul. Ini adalah cara yang direkomendasikan oleh W3 juga. Saya sarankan anda cek link ini disebut Berpusat blok atau image dari W3C.org.
Tips yang digunakan di sini adalah:
Secara pribadi saya sebenarnya tidak setuju tentang menggunakan pembantu untuk tujuan ini.
Bayangkan anda memiliki
Dan css:
Cara mudah yang bekerja untuk saya:
Ia bekerja untuk Google Chrome yang sangat baik. Coba yang satu ini di browser yang berbeda.