Mengapa vertikal-align: tengah tidak bekerja pada rentang atau div saya?

Saya mencoba memusatkan spanatau divelemen secara vertikal di dalam divelemen lain . Namun ketika saya katakan vertical-align: middle, tidak ada yang terjadi. Saya sudah mencoba mengubah displayproperti dari kedua elemen, dan sepertinya tidak ada yang berhasil.

Inilah yang sedang saya lakukan di halaman web saya:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Berikut ini adalah jsfiddle dari implementasi yang menunjukkan bahwa itu tidak berfungsi: http://jsfiddle.net/gZXWC/

Ini tampaknya menjadi cara terbaik - beberapa waktu telah berlalu sejak posting asli saya dan inilah yang harus dilakukan sekarang: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Menggunakan CSS3:

<div class="outer">
   <div class="inner"/>
</div>

Css:

.outer {
  display : flex;
  align-items : center;
  justify-content: center;
}

Catatan: Ini mungkin tidak berfungsi di IE lama

Coba ini, bekerja untuk saya dengan sangat baik:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Mengatur ketinggian garis ke ketinggian yang sama dengan yang mengandung div juga akan berfungsi

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Dalam kasus Anda tidak dapat mengandalkan flexbox ... Tempat .childke .parentpusat 's. Bekerja ketika ukuran piksel tidak diketahui (dengan kata lain, selalu) dan tidak ada masalah dengan IE9 + juga.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Anda harus memakai vertical-align: middleelemen dalam, bukan elemen luar. Atur line-heightproperti pada elemen luar agar sesuai dengan heightelemen luar. Kemudian atur display: inline-blockdan line-height: normalpada elemen dalam. Dengan melakukan ini, teks pada elemen bagian dalam akan dibungkus dengan ketinggian garis normal. Bekerja di Chrome, Firefox, Safari, dan IE 8+

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

Biola

Saya menggunakan ini untuk menyelaraskan segala sesuatu di tengah div pembungkus kalau-kalau itu membantu siapa pun - saya merasa paling sederhana:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Di sini Anda memiliki contoh dua cara melakukan pelurusan vertikal. Saya menggunakannya dan mereka bekerja dengan cukup baik. Satu menggunakan penentuan posisi absolut dan lainnya menggunakan flexbox .

Contoh Align Vertikal

Menggunakan flexbox, Anda dapat menyelaraskan sebuah elemen dengan sendirinya di dalam elemen lain dengan display: flex;menggunakan align-self. Jika Anda perlu menyelaraskannya juga secara horizontal, Anda dapat menggunakan align-itemsdan justify-contentdi dalam wadah.

Jika Anda tidak ingin menggunakan flexbox, Anda bisa menggunakan properti posisi. Jika Anda menjadikan wadah relatif dan konten absolut, konten akan dapat bergerak bebas di dalam wadah. Jadi, jika Anda menggunakan top: 0;dan left: 0;dalam konten, itu akan diposisikan di sudut kiri atas wadah.

Kemudian, untuk menyelaraskannya, Anda hanya perlu mengubah referensi atas dan kiri menjadi 50%. Ini akan memposisikan konten di pusat wadah dari sudut kiri atas konten.

Jadi, Anda perlu memperbaiki ini menerjemahkan konten setengah ukurannya ke kiri dan atas.

di sini adalah artikel bagus tentang cara menyelaraskan vetical .. Saya suka cara mengapung.

http://www.vanseodesign.com/css/vertical-centering/

HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

Dan gaya yang sesuai:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

Kami mengatur div induk untuk ditampilkan sebagai tabel dan div anak untuk ditampilkan sebagai sel tabel. Kita kemudian dapat menggunakan penyelarasan vertikal pada div anak dan mengatur nilainya ke tengah. Apa pun di dalam div anak ini akan dipusatkan secara vertikal.

Itu mudah. Cukup tambahkan display:table-celldi kelas utama Anda.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

Lihatlah jsfiddle ini !

Ini adalah solusi termudah terbaru - tidak perlu mengubah apa pun, cukup tambahkan tiga baris aturan CSS ke wadah div Anda di mana Anda ingin memusatkan. Saya suka Flex Box#LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Bonus

yang justify-contentnilai dapat diatur untuk beberapa pilihan berikut:

• flex-start, yang akan menyelaraskan div anak ke tempat aliran fleksibel dimulai dalam wadah induknya. Dalam hal ini, ia akan tetap di atas.

• center, yang akan menyelaraskan div anak ke tengah wadah induknya. Ini benar-benar rapi, karena Anda tidak perlu menambahkan div tambahan untuk membungkus semua anak untuk meletakkan bungkusnya dalam wadah induk untuk memusatkan anak-anak. Karena itu, ini adalah pusat vertikal yang sebenarnya (dalam bahasa Indonesia column flex-direction. Demikian pula, jika Anda mengubah flow-directionke row, itu akan menjadi pusat secara horizontal.

• flex-end, yang akan menyelaraskan div anak ke tempat aliran fleksibel berakhir di wadah induknya. Dalam hal ini, itu akan pindah ke bawah.

• space-between, yang akan menyebarkan semua anak dari awal aliran ke akhir aliran. Jika demo, saya menambahkan div anak lain, untuk menunjukkan mereka tersebar.

• space-around, mirip dengan space-between, tetapi dengan setengah ruang di awal dan akhir aliran.

Karena vertical-alignberfungsi seperti yang diharapkan pada td, Anda dapat menempatkan sel tunggal tabledi divuntuk menyelaraskan kontennya.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

Kikuk, tetapi bekerja sejauh yang saya tahu. Mungkin tidak memiliki kelemahan dari solusi lainnya.

Cukup masukkan konten di dalam tabel dengan tinggi 100%, dan atur tinggi untuk div utama

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Untuk memusatkan elemen span atau div secara vertikal di dalam div lain, tambahkan posisi relatif ke div induk dan posisi absolut ke div anak. Sekarang div anak dapat diposisikan di mana saja di dalam div. Contoh di bawah ini memusatkan secara horizontal dan vertikal.

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

css:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Ini adalah pendekatan modern dan memanfaatkan fungsi CSS Flexbox. Anda sekarang dapat menyelaraskan konten secara vertikal dalam wadah induk Anda dengan hanya menambahkan gaya ini ke .mainwadah

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

Dan kamu baik untuk pergi!