Cara menyelaraskan gambar secara vertikal di dalam div

1456

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>

Luaskan cuplikan

css image vertical-alignment Arnaud Le Blanc
sumber

3

Halo, maaf, tapi saya tidak setuju tentang menggunakan pembantu di sini menjadi solusi yang paling dihargai. Tapi itu bukan satu-satunya cara. Lainnya sama didukung oleh browser. Saya menawarkan solusi di sini di stackoverflow.com/a/43308414/7733724 dan W3C.org tentang info. Anda bisa memeriksanya. Cheers

Sam

Artikel Reading Centering Things di W3C akan bermanfaat: w3.org/Style/Examples/007/center.en.html

QMaster

Panduan sempurna untuk menyelaraskan css-tricks.com/centering-css-complete-guide

Michael Yurin

2128

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/

Tampilkan cuplikan kode

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

Luaskan cuplikan

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/

Tampilkan cuplikan kode

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

Luaskan cuplikan

Bagaimana itu bekerja:

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:
Saat Anda memiliki blok dengan ketinggian tetap (dalam px, ematau unit absolut lainnya), Anda dapat mengatur ketinggian blok dalam %.
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.

kizu
sumber

2

Anda dapat melihat sendiri: jsfiddle.net/kizu/Pw9NL - hanya kotak inline yang tidak menghasilkan kotak, tetapi semua case lainnya berfungsi dengan baik.

kizu

3

Jawaban yang sangat bagus Saya berjuang dengan ruang antara elemen blok inline, yang berarti antara .framedan .frame:before. Sebuah solusi yang diusulkan di sini adalah untuk menambahkan margin-left: -4pxke .frame. Semoga ini membantu.

Mick

111

BAYAR PERHATIAN bahwa: <img src=""/>BUKAN bagian dalam <span></span>helper yang ditambahkan. Itu di luar. Aku baru saja menarik setiap helai rambut kami dengan tidak menyadarinya.

ryan

50

Sepertinya Anda juga perlu menambahkan "white-space: nowrap;" ke bingkai atau Anda akan mengalami masalah jika Anda memiliki garis putus-putus antara gambar Anda dan rentang helper. Saya butuh satu jam mengapa solusi ini tidak berhasil untuk saya.

juminoz

2

Dalam kasus saya, gambar saya memiliki tinggi-max dan lebar-max keduanya diatur ke 100% sehingga gambar akan menskala wadah, dan metode ini tidak berfungsi. Solusi saya adalah mengubah nilai-nilai ini menjadi 90% (yang dalam kasus saya baik-baik saja; dalam situasi lain Anda mungkin perlu skala wadah yang sesuai), dan juga menambahkan helper ke sisi lain gambar sehingga bantalan akan tetap bahkan di kedua sisi.

Eric Dubé

513

Ini mungkin berguna:

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

Tahir Yasin
sumber

74

Jika Anda juga ingin menyelaraskan gambar secara horizontal, tambahkan kiri: 0; kanan: 0; to img

jameskind

Apakah rly yang satu ini tidak berfungsi di IE10? Saya agak menggunakan ini di semua tempat

Max Yari

Juga bekerja (untuk saya) dengan div kontainerposition:fixed;

PJ Brunet

1

Solusi termudah dan terbersih terima kasih!

KDT

Terima kasih! Bekerja untukku !!

Alexander Malygin

486

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

pratinjau

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

jomo
sumber

Adakah cara untuk mengadaptasi ini sehingga Anda dapat memperbesar gambar yang terlalu besar, katakan 2x, dan masih akan tetap terpusat secara horizontal dan vertikal?

Justin

Jika kita ingin membuatnya berfungsi untuk menyejajarkan bawah vertikal bukan tengah, kode apa yang harus dimodifikasi?

bobo

1

@ Bob hanya menghapus top: 0;. Ini menghasilkan hanya bottom: 0;diterapkan secara vertikal.

jomo

Jawaban terbaik!

user315338

278

Solusi tiga baris:

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

Ini berlaku untuk apa saja.

Dari sini .

Jorge Orpinel
sumber

Awalan: -ms- atau -webkit- (sebelum mentransformasi). w3schools.com/cssref/css3_pr_transform.asp

Jorge Orpinel

3

Awalan untuk IE9, tetapi tidak berfungsi sama sekali di IE8 dan lebih rendah: caniuse.com/#search=transform Tapi pendapat saya: Saya tidak peduli tentang IE8

Reign.85

Tidak ada yang memperhatikan apa yang terjadi ketika anak yang dipusatkan lebih tinggi dari layar perangkat dan orang tua adalah anak pertama di DOM ...?

tao

3

Bagus ketika Anda tidak dapat menggunakan position: absolute;karena Anda membutuhkan lebar yang mengalir.

plong0

2

Solusi terbaik sejauh ini, bahkan lebih baik daripada flexbox, dengan dukungan untuk sebagian besar semua browser modern dan lama. Harap

angkat suara

141

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>

Luaskan cuplikan

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

Matej
sumber

Tolong izinkan saya merujuk Anda ke panduan di sini yang bahkan bekerja untuk IE5 (dikurangi dari apa yang saya baca sejauh ini di posting) webmasterworld.com/css/3350566.htm

Matej

solusi ini merupakan awal yang baik, tetapi gambar yang terlalu besar diubah ukurannya dengan rasio yang salah . Tolong lihat jawaban saya.

jomo

@ HansWürstchen ya, tapi intinya adalah ke pusat, apakah terlalu besar adalah pilihan desain. Menambahkan lebih banyak css = lebih banyak kekacauan :)

Matej

1

@matejkramny itu tidak mendapatkan kebesaran. jika gambar yang besar, memiliki rasio yang salah. itu berarti ia membentang tinggi dan tidak terlihat benar.

jomo

✔ Wow, ini berfungsi dengan gambar yang melimpah (lebih besar dari bungkusnya), jawaban yang diterima tidak.

Cedric Reichenbach

120

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>

Luaskan cuplikan

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

Ricardo Zea
sumber

3

Ini sangat berguna jika ketinggian wadah tidak diatur

Dave Barnett

atau align-selfuntuk item individual

Michael

Masalahnya align-selfadalah bahwa item fleksibel akan meregangkan ketinggian wadah induk.

Ricardo Zea

101

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

Peter Mortensen
sumber

4

Anehnya saya tidak bisa mendapatkan jawaban yang diterima untuk bekerja dalam situasi saya (saya juga memotong gambar dengan overflow: hidden). Ini bekerja secara prefek.

Luca Spiller

3

Saya hanya menguji ini di Chrome, tetapi ketinggian garis tampaknya menjadi kuncinya. Saya menempatkan atribut vertical-align pada div daripada img, karena img saya ada di dalam anchor (<a/>).

Harga Todd

1

Ya, jauh lebih sederhana daripada solusi yang diterima, dan bekerja dengan indah. Saya juga menemukan solusi ini di jsfiddle.

vdboor

1

Jika Anda tahu ketinggian apa yang harus

dipenuhi

Dari pengalaman saya, solusi ini hanya berfungsi font-size: 0untuk div. Untuk wadah yang cukup besar Anda bisa melewatkannya tetapi jika Anda div100px dan img adalah 80px itu akan menjadi beberapa piksel lebih rendah.

alTus

38

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>

Luaskan cuplikan

turniket
sumber

28

Ada solusi super mudah dengan flexbox!

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

BBlackwo
sumber

5

Ya tetapi Anda hampir tidak dapat melihatnya di semua jawaban. Saya mencoba menyorotinya secara sederhana dan jelas karena ini adalah solusi yang jauh lebih mudah daripada semua jawaban lainnya.

BBlackwo

Ini adalah jawaban terbaik yang juga berhasil untuk saya. Tetapi dalam kasus saya dalam bingkai "inline-flex" bekerja lebih baik untuk saya. dan untuk gambar di dalamnya saya menambahkan: "vertical-align: middle".

Sophie Cooperman

22

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

Yeodave
sumber

Saya telah melihat berbagai metode, tetapi yang ini baru (bahkan pada tahun 2013) bagi saya.

Mike Ebert

Lebih baik daripada menempatkan gambar di dalam tabel hanya untuk menempatkannya di tengah

Jonat

3

display: table-cell tidak selalu ukuran dengan benar jika Anda ingin lebarnya menjadi 100%

Redtopia

1

Apa itu " PI"?

Peter Mortensen

18

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>

Luaskan cuplikan

Santosh Khalse
sumber

14

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.

Benjamin Udink sepuluh Cate
sumber

Solusi yang sangat bagus, namun saya berharap beberapa gambar lebih besar dari wadah, dan dalam hal ini saya berencana untuk menggunakan max-height / max-width pada mereka. Adakah cara untuk melakukan ini dengan gambar latar belakang?

Arnaud Le Blanc

ini bukan "elemen .frame" itu adalah "div dengan kelas .frame"

JGallardo

Jika tinggi gambar tidak melebihi tinggi frame div, ini adalah solusi terbaik dan paling sederhana ...

efirat

13

Bayangkan sudah

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

Dan css:

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

fdrv
sumber

Uau! Flex sangat memerintahzzzz! Terima kasih!

Pedro Ferreira

gunakan penutup objek-fit jika Anda ingin anak mengambil lebar penuh dari orang tua dan masih sejajar secara vertikal ke tengah. Lihat css-tricks.com/snippets/css/a-guide-to-flexbox untuk memindahkan gambar di dalam induk menggunakan flex-box

mattdlockyer

11

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

Joseph Marikle
sumber

Bagus. Adakah peluang untuk solusi pure-css?

Arnaud Le Blanc

Sayangnya tidak, kecuali jika Anda ingin menggunakan tabel atau menjatuhkan kompatibilitas dengan versi IE yang lebih lama. :( Jika Anda tahu ukuran persis gambar sebelumnya, itu akan berbeda, tetapi bukan tanpa itu tidak mungkin hanya dengan CSS.

Joseph Marikle

@ Joseph Bagaimana Anda memperbaikinya dengan tabel?

Benjamin Udink ten Cate

@Benjamin Udink ten Cate Ini berantakan tapi bisa dilakukan dengan cara ini: jsfiddle.net/DZ8vW/2 (ini tidak disarankan, tetapi harus bekerja)

Joseph Marikle

1

Baik itu sesuai dengan kebutuhan arnaud dengan sempurna. Tanpa JS, hanya CSS dan HTML.

Benjamin Udink ten Cate

11

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

Webar
sumber

Bagus. Adakah hack untuk IE7 yang akan menghindari javascript?

Arnaud Le Blanc

Saya tidak yakin, tapi mungkin ekspresi css akan membantu. Tetapi mereka juga javascript. Satu-satunya perbedaan, bahwa Anda menulisnya dalam file css, bukan dalam js.

Webar

Ya, ide yang bagus. Itu akan lebih mudah dikelola (skrip dijalankan secara otomatis sesuai kebutuhan), dan seperti yang seharusnya IE7-saja tidak apa-apa.

Arnaud Le Blanc

7

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

Ilya Lysenko
sumber

7

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.

anglimas
sumber

hanya ie7, cukup cantumkan ketinggian garis: 25px;

anglimas

1

sepertinya tidak selaras dengan benar pada firefox dan chrome ( jsfiddle.net/4RPFa/19 )

Arnaud Le Blanc

7

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

sandeep
sumber

2

Tidak berfungsi (setidaknya di Firefox). Untuk kutipan yang hilang, ini diperbolehkan dalam HTML5 (tidak tahu jenis dokumen yang digunakan di jsfiddle)

Arnaud Le Blanc

7

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

slava
sumber

IE8 +, sayangnya. Baik untuk saya, tapi mungkin tidak untuk orang lain.

TheCarver

perhatikan juga bahwa display:table-cell;tidak menerima% sebagai lebar

Mutmatt

7

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>

Luaskan cuplikan

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

Sam
sumber

6

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.

HTML DOCTYPE
sumber

6

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>

Luaskan cuplikan

juliangonzalez
sumber

4

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

feeela
sumber

3

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>

algreat
sumber

sebenarnya "posisi: diperbaiki" pada gambar bekerja untuk saya di mana saya telah frustrasi atas banyak jawaban salah dari orang-orang yang menyarankan metode tabel-sel yang tidak berfungsi dengan baik dalam pekerjaan saya. Dengan metode yang disarankan oleh algreat Anda tidak perlu wadah tambahan juga.

Vasilios Paspalas

2

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

Masoumeh Karvar
sumber

1

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>

Luaskan cuplikan

Alireza
sumber

0

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

svnm
sumber

0

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

Kumar
sumber

0

Gunakan yang ini:

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

Dan Anda bisa berbeda font-size.

th3pirat3
sumber

0

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>

Luaskan cuplikan

mariusfv
sumber

Cara menyelaraskan gambar secara vertikal di dalam div

Contoh

Jawaban:

Demo

CSS

JavaScript

Solusi menggunakan tabel dan sel tabel