kzen.dev
Lebih
Question

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="
/embedded/result,js,html,css/">
.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="
/embedded/result,js,html,css/">
.png" height=250 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=25 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=23 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=21 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=19 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=17 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=15 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=13 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=11 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=9 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=7 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=5 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=3 /> </div>
Peter Mortensen
Peter Mortensen
Pertanyaan edit 11 Juli 2019 в 7:00
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net
Pemrograman
image
css
vertical-alignment
Pertanyaan ini memiliki :value jawaban dalam bahasa Inggris, untuk membacanya masuk ke akun Anda.
Solution / Answer

Satu-satunya (dan yang terbaik cross-browser) cara yang saya tahu adalah dengan menggunakan aplikasi yang inline-block penolong dengan height: 100% dan vertical-align: middle pada kedua elemen.

Jadi ada solusi: 

.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 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 dan ungkapan() 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>

Cara kerjanya:

  1. Ketika anda memiliki dua inline-block unsur-unsur yang dekat satu sama lain, anda dapat menyelaraskan satu sama lain's sisi, sehingga dengan vertical-align: middle anda'll mendapatkan sesuatu seperti ini:

Dua selaras blok

  1. Ketika anda memiliki sebuah blok dengan tetap tinggi (di px, mereka atau lainnya mutlak unit), anda dapat mengatur ketinggian blok batin di %.
  2. Jadi, menambahkan satu inline-block dengan height: 100% di blok dengan tetap tinggi akan menyelaraskan lain inline-block elemen di dalamnya (<img/> dalam kasus anda) secara vertikal dekat ini.
2046
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

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

496
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

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

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

Tiga line solusi:

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

Hal ini berlaku untuk apa pun.

Dari di sini.

242
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

A murni CSS solusi:

.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="
/embedded/result,js,html,css/">
.png" height=250 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=25 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=23 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=21 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=19 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=17 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=15 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">
.png" height=13 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=11 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=9 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=7 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=5 /> </div> <div class=frame> <img src="
/embedded/result,js,html,css/">.png" height=3 /> </div>

Kunci stuff

// 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
dota2pro
dota2pro
Jawaban edit 12 November 2019 в 8:23
133

Untuk yang lebih modern, solusi, dan jika tidak ada kebutuhan untuk dukungan browser lawas, anda bisa lakukan 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>

Berikut ini's Pen: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Peter Mortensen
Peter Mortensen
Jawaban edit 11 Juli 2019 в 7:27
116
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

Dengan cara ini anda dapat pusat gambar secara vertikal (demo):

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

Juga, anda 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>
Peter Mortensen
Peter Mortensen
Jawaban edit 11 Juli 2019 в 9:49
36
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

Ada super mudah solusi flexbox!

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

Anda bisa mencoba pengaturan CSS of PI display: table-cell; vertical-align: middle;

22
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

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="
/embedded/result,js,html,css/">
.png" /> </div>
Peter Mortensen
Peter Mortensen
Jawaban edit 11 Juli 2019 в 7:29
16

Gambar latar belakang solusi

Saya dihapus elemen gambar sama sekali dan mengaturnya sebagai latar belakang div dengan class .frame

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.

14
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

Anda bisa lakukan ini:

Demo

/embedded/result,js,html,css/">

CSS

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

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


JavaScript

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

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

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:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
11
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

Saya tidak yakin tentang Internet Explorer, tetapi di bawah Firefox dan Chrome, jika anda memiliki sebuah img dalam div wadah, berikut CSS konten harus bekerja. Setidaknya bagi saya itu bekerja 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;
}
7

Coba solusi ini dengan CSS murni

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:

.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 di sekitar dengan img tag's meninggalkan 3 piksel untuk 2 piksel ruang dari atas. Sekarang saya mengurangi line-height, dan's bekerja.

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

Line-height property yang diberikan berbeda di browser yang berbeda. Jadi, kita harus mendefinisikan berbeda line-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-chrome

7
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

Solusi saya: [

][1]

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

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:

  • Posisi mutlak wadah ditampilkan sebagai tabel
  • Vertikal sejajar ke pusat konten yang ditampilkan sebagai tabel-sel
.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.

Peter Mortensen
Peter Mortensen
Jawaban edit 11 Juli 2019 в 7:31
6
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev

Bayangkan anda memiliki

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

Dan css:

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

Cara mudah yang bekerja untuk saya:

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

Ia bekerja untuk Google Chrome yang sangat baik. Coba yang satu ini di browser yang berbeda.

Peter Mortensen
Peter Mortensen
Jawaban edit 11 Juli 2019 в 7:26
5
Anda punya pertanyaan? Tambahkan di situs dan dapatkan jawabannya secara instan
id.kzen.dev
Related communities 3
HTML dan CSS Indonesia
3 960 pengguna
Silahkan bertanya terkait mengenai HTML maupun CSS. Membaca, menulis, berbagi. Baca dahulu pesan tersemat di pinned post.
Pemrograman Web Indonesia (HTML CSS Javascript PHP MySQL)
299 pengguna
Official Website : https://esistemindo.com Belajar Pemrograman Web (HTML CSS Javascript PHP MySQL) Grup Belajar Pemrograman Web. HTML + PHP + Javascript + MySQL DB Semoga menjadi forum belajar, menambah wawasan, peningkatan mutu personal kita semua.
Css Indonesia
10 pengguna
Css Indonesia group ini membahas tentang Css dan web design Bagi yg mau memperdalam Css atau ingin memulai Css atau bahkan Javascript dan html, bisa download aplikasi di bawah ini : https://play.google.com/store/apps/details?id=com.sololearn Thank you