Cara menyelaraskan gambar secara vertikal di dalam div

Bagaimana Anda bisa menyelaraskan gambar di dalam sebuah berisi div ?

Contoh

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

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

.frameKetinggian sudah diperbaiki dan tinggi gambar tidak diketahui. Saya dapat menambahkan elemen baru di.frame jika itu satu-satunya solusi. Saya mencoba melakukan ini di Internet Explorer 7 dan kemudian, WebKit, Gecko.

Lihat jsfiddle di sini .

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

Satu-satunya cara (dan lintas-browser terbaik) seperti yang saya tahu adalah menggunakan inline-blockpenolong dengan height: 100%dan vertical-align: middlepada kedua elemen.

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

.frame {
    height: 25px;      /* Equals maximum 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=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

Atau, jika Anda tidak ingin memiliki elemen tambahan di browser modern dan tidak keberatan menggunakan ekspresi Internet Explorer, Anda dapat menggunakan elemen pseudo dan menambahkannya ke Internet Explorer menggunakan Ekspresi yang mudah digunakan, yang hanya berjalan satu kali per elemen , jadi tidak akan ada masalah kinerja:

Solusi dengan :beforedan expression()untuk Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* Equals maximum 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=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Bagaimana itu bekerja:

1. Ketika Anda memiliki dua inline-blockelemen yang saling berdekatan, Anda dapat menyelaraskan satu sama lain ke sisi yang lain, sehingga vertical-align: middleAnda akan mendapatkan sesuatu seperti ini:

   

2. Saat Anda memiliki blok dengan ketinggian tetap (dalam px, ematau unit absolut lainnya), Anda dapat mengatur ketinggian blok dalam %.

3. Jadi, menambahkan satu inline-blockdengan height: 100%di blok dengan ketinggian tetap akan menyelaraskan inline-blockelemen lain di dalamnya ( <img/>dalam kasus Anda) secara vertikal di dekatnya.

Ini mungkin berguna:

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

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

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

Solusi tiga baris:

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

Ini berlaku untuk apa saja.

Dari sini .

Sebuah murni solusi 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;
}

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

Hal-hal kunci

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

Untuk solusi yang lebih modern, dan jika tidak perlu mendukung browser lawas, Anda dapat melakukan ini:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: 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>

Inilah Pena: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

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

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Anda juga dapat menggunakan Flexbox untuk mencapai hasil yang benar:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}

<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

Ada solusi super mudah dengan flexbox!

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

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

Anda dapat mencoba kode di bawah ini:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

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

Solusi gambar latar belakang

Saya menghapus elemen gambar sama sekali dan mengaturnya sebagai latar belakang div dengan kelas .frame

http://jsfiddle.net/URVKa/2/

Setidaknya ini berfungsi dengan baik di Internet Explorer 8, Firefox 6 dan Chrome 13.

Saya memeriksa, dan solusi ini tidak akan berfungsi untuk mengecilkan gambar yang lebih tinggi dari 25 piksel. Ada properti yang disebutbackground-size yang mengatur ukuran elemen, tetapi CSS 3 yang akan bertentangan dengan persyaratan Internet Explorer 7.

Saya akan menyarankan Anda untuk mengulang prioritas dan desain browser Anda untuk browser terbaik yang tersedia, atau mendapatkan beberapa kode sisi server untuk mengubah ukuran gambar jika Anda ingin menggunakan solusi ini.

Bayangkan sudah

<div class="wrap">
    <img src="#">
</div>

Dan css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

Anda bisa melakukan ini:

Demo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}    

JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

Properti utama adalah display: table-cell;untuk .frame. Div.frameditampilkan sesuai dengan ini, jadi Anda harus membungkusnya dalam elemen blok.

Ini berfungsi di Firefox, Opera, Chrome, Safari dan Internet Explorer 8 (dan lebih baru).

MEMPERBARUI

Untuk Internet Explorer 7 kita perlu menambahkan ekspresi CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Solusi saya: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Ini berfungsi untuk browser modern (2016 saat mengedit) seperti yang ditunjukkan dalam demo ini pada codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

Sangat penting bagi Anda untuk memberikan gambar pada kelas atau menggunakan pewarisan untuk menargetkan gambar yang Anda perlukan terpusat. Dalam contoh ini kami menggunakan .frame img {}sehingga hanya gambar yang dibungkus oleh div dengan kelas yang .frameakan ditargetkan.

Coba solusi ini dengan CSS murni http://jsfiddle.net/sandeep/4RPFa/72/

Mungkin itu adalah masalah utama dengan HTML Anda. Anda tidak menggunakan tanda kutip ketika Anda mendefinisikan c lass& image heightdalam HTML Anda.

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

Ketika saya bekerja dengan imgtag itu menyisakan 3 piksel hingga 2 piksel ruang dari top. Sekarang saya berkurangline-height , dan itu berfungsi.

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

The line-heightproperti diberikan berbeda di browser yang berbeda. Jadi, kita harus mendefinisikan line-heightbrowser properti yang berbeda .

Lihat contoh ini: http://jsfiddle.net/sandeep/4be8t/11/

Lihat contoh ini tentang line-heightperbedaan di berbagai browser: perbedaan ketinggian input di Firefox dan Chrome

Saya tidak yakin tentang Internet Explorer, tetapi di bawah Firefox dan Chrome, jika Anda memiliki imgdalam divwadah, isi CSS berikut harus bekerja. Setidaknya bagi saya itu berfungsi dengan baik:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Solusi menggunakan tabel dan sel tabel

Kadang-kadang itu harus diselesaikan dengan menampilkan sebagai table / table-cell. Misalnya, layar judul cepat. Ini adalah cara yang direkomendasikan oleh W3 juga. Saya sarankan Anda memeriksa tautan ini yang disebut Memusatkan blok atau gambar dari W3C.org.

Kiat yang digunakan di sini adalah:

• Wadah penentuan posisi absolut ditampilkan sebagai tabel
• Selaras vertikal dengan konten tengah yang ditampilkan sebagai sel tabel

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}

<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

Secara pribadi saya sebenarnya tidak setuju tentang menggunakan pembantu untuk tujuan ini.

Cara mudah yang bekerja untuk saya:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Ini bekerja untuk Google Chrome dengan sangat baik. Coba yang ini di browser yang berbeda.

Untuk memusatkan gambar di dalam wadah (bisa berupa logo) di samping beberapa teks seperti ini:

Pada dasarnya Anda membungkus gambar

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Jika Anda dapat hidup dengan margin berukuran piksel, cukup tambahkan font-size: 1px;ke .frame. Tapi ingat, bahwa sekarang pada .frame1em = 1px, yang berarti, Anda perlu mengatur margin dalam piksel juga.

http://jsfiddle.net/feeela/4RPFa/96/

Sekarang tidak lagi terpusat di Opera ...

Saya memiliki masalah yang sama. Ini bekerja untuk saya:

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

Anda bisa menggunakan ini:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

Menggunakan tabledan table-cellmetode melakukan pekerjaan, khususnya karena Anda menargetkan beberapa browser lama juga, saya membuat cuplikan untuk Anda yang dapat Anda jalankan dan periksa hasilnya:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

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

<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div> 

Saya telah bermain-main dengan menggunakan bantalan untuk perataan tengah. Anda perlu menentukan ukuran luar-wadah tingkat atas, tetapi wadah dalam harus mengubah ukuran, dan Anda dapat mengatur padding pada nilai persentase yang berbeda.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

Solusi terbaik adalah itu

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

Gunakan yang ini:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

Dan Anda bisa berbeda font-size.

Ingin menyelaraskan gambar yang ada setelah teks / judul dan keduanya di dalam div?

Lihat di JSfiddle atau Run Code Snippet.

Pastikan untuk memiliki ID atau kelas di semua elemen Anda (div, img, judul, dll.).

Bagi saya berfungsi solusi ini di semua browser (untuk perangkat seluler Anda harus menyesuaikan kode Anda dengan: @ media).

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}

<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>