Pertanyaan Bagaimana secara vertikal menyelaraskan gambar di dalam div?


Pertanyaan

Bagaimana Anda bisa menyelaraskan gambar di dalam yang mengandung div?

Contoh

Dalam contoh saya, saya perlu memusatkan pusat secara vertikal <img> dalam <div> dengan class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frameKetinggian tetap dan tinggi gambar tidak diketahui. Saya dapat menambahkan elemen baru di .frame kalau itu satu-satunya solusi. Saya mencoba melakukan ini di IE≥7, Webkit, Gecko.

Lihat jsfiddle sini


1128
2017-09-01 16:25


asal


Jawaban:


Satu-satunya cara (dan yang terbaik lintas peramban) yang saya tahu adalah menggunakan inline-block pembantu dengan height: 100% dan vertical-align: middle pada kedua elemen.

Jadi ada solusinya: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* this is required unless you put the helper span closely near the img */
    
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Atau, jika Anda tidak ingin memiliki elemen tambahan di peramban modern dan tidak keberatan menggunakan ekspresi IE, Anda dapat menggunakan elemen pseudo dan menambahkannya ke IE menggunakan Ekspresi yang nyaman, yang hanya berjalan satu kali per elemen, jadi tidak akan ada masalah kinerja apa pun:

Solusinya dengan :before dan expression() untuk IE: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    
    text-align: center; margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}
<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>


Bagaimana itu bekerja:

  1. Ketika Anda memiliki dua inline-block elemen dekat satu sama lain, Anda dapat mengarahkan masing-masing ke sisi lain, sehingga dengan vertical-align: middle Anda akan mendapatkan sesuatu seperti ini:

    Two aligned blocks

  2. Ketika Anda memiliki blok dengan ketinggian tetap (dalam px, em atau unit absolut lainnya), Anda dapat mengatur ketinggian blok bagian dalam %.

  3. Jadi, tambahkan satu inline-block dengan height: 100% di blok dengan ketinggian tetap akan menyelaraskan yang lain inline-block elemen di dalamnya (<img/> dalam kasus Anda) secara vertikal di dekat itu.

1818
2017-09-05 16:04



Ini mungkin berguna:

div {
    position:relative;
    width:200px;
    height:200px;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.image {
    min-height:50px
}

Referensi: http://www.student.oulu.fi/~laurirai/www/css/middle/


447
2017-07-30 05:57



Solusi matejkramny adalah awal yang baik, tetapi gambar yang terlalu besar memiliki rasio yang salah.
Ini garpu saya:

demo: https://jsbin.com/lidebapomi/edit?html,css,output

preview


HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

373
2017-09-18 09:53



Solusi 3 baris:

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

Ini berlaku untuk apa saja.

Dari sini.


155
2018-02-10 04:48



Solusi CSS PURE:

http://jsfiddle.net/3MVPM/ 

CSS:

.frame {  
    margin: 1em 0;  
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}  
img {  
    max-height: 25px;  
    max-width: 160px;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A;  
}

Barang utama

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

125
2017-09-05 11:09



Dengan cara ini Anda dapat memusatkan gambar secara vertikal (demo):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

95
2017-11-22 16:03



Bagi mereka yang mendarat di pos ini dan tertarik dengan solusi yang lebih modern, dan yang tidak perlu mendukung browser lawas, Anda dapat melakukan ini:

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: auto;
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Berikut adalah Pen: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


89
2017-12-29 20:13



Anda dapat mencoba mengatur CSS dari PI ke display: table-cell; vertical-align: middle;


19
2017-09-07 16:31



Ada sebuah sangat mudah solusi dengan flexbox!

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

12
2018-04-21 00:56