rata vertikal tengah dalam <div>

126

Saya ingin menjaga tinggi #abc divpada 50pxdan teks untuk disejajarkan secara vertikal di tengah div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Luaskan cuplikan

css vertical-alignment

— Paling sakit
sumber

183

Anda bisa menggunakan line-height: 50px;, Anda tidak perlu di vertical-align: middle;sana.

Demo

Di atas akan gagal jika Anda memiliki banyak baris, jadi dalam hal ini Anda dapat membungkus teks Anda menggunakan spandan daripada menggunakan display: table-cell;dan display: table;bersama vertical-align: middle;, juga jangan lupa untuk menggunakan width: 100%;untuk#abc

Demo

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

Solusi lain yang bisa saya pikirkan sini adalah dengan menggunakan transformproperti dengan translateY()mana Yjelas singkatan Y Axis. Ini cukup lurus ke depan ... Yang perlu Anda lakukan adalah mengatur posisi elemen ke absolutedan kemudian posisi 50%dari topdan menerjemahkan dari porosnya dengan negatif-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Demo

Perhatikan bahwa ini tidak akan didukung di browser lama, misalnya IE8, tetapi Anda dapat membuat IE9 dan versi browser lama Chrome dan Firefox lainnya dengan menggunakan -ms, -mozdan -webkitprefiks masing-masing.

Untuk informasi lebih lanjut transform, Anda dapat merujuk di sini .

— Tuan Alien
sumber

Saya perlu mengetahui solusi tinggi garis sederhana ini sepanjang kehidupan profesional saya dan baru mempelajarinya sekarang. Terima kasih, Tuan Alien.

— Pantai Nathan

94

Sederhana: berikan div induk ini:

display: table;

dan berikan div turunan ini:

display: table-cell;
vertical-align: middle;

Itu dia!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Luaskan cuplikan

— Burak Çanga
sumber

6

ini buruk karena ini menggunakan tabel sebagai peretasan, ini mungkin berfungsi untuk banyak kasus, tetapi ketika Anda ingin mengubah lebar 'tabel', maka itu tidak akan berfungsi dengan baik (yang saya mengalami masalah sekarang dengan solusi ini )

— Kevin Simple

Saya tidak perlu menambahkan display:table;ke induk untuk membuatnya berfungsi.

— VincentPerrin.com

Mungkin ini peretasan ... tetapi BEKERJA, dan sebagian besar solusi lain hanya berfungsi dalam kasus tertentu dan seringkali tidak dapat digunakan dalam kasus kami.

— Jerry

Keuntungan dari solusi ini: berfungsi dengan semua jenis konten (tidak hanya untuk teks, dan tidak hanya satu baris ...)

— Jerry

77

Pertanyaan lama tetapi saat ini CSS3 membuat perataan vertikal sangat sederhana !

Tambahkan saja ke #abccss berikut:

display:flex;
align-items:center;

Demo Sederhana

Demo pertanyaan asli diperbarui

Contoh Sederhana:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Luaskan cuplikan

— Jaqen H'ghar
sumber

3

Saya juga menyarankan: display: grid; sejajarkan-item: tengah; Ini bekerja lebih baik ketika Anda memiliki lebih dari satu objek untuk disejajarkan secara vertikal

— Leonardo Daga

Browser mana yang mendukung CSS3 ?

— Kiquenet

@Kiquenet, 92% dari pasar global caniuse.com/#search=align-items

— Daniel Kucal

Perfekt! Sederhana dan mudah .. cukup tambahkan ke wadah

— Ujjwal Singh

47

Saya menemukan solusi ini oleh Sebastian Ekström. Cepat, kotor, dan bekerja dengan sangat baik. Meskipun Anda tidak mengetahui tinggi induknya:

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Baca artikel lengkapnya di sini .

— Scott
sumber

3

Ini mungkin mengaburkan hal-hal karena hasil transformasi dapat mengarah pada hal-hal yang diposisikan di lokasi setengah piksel.

— Kevin Wheeler

1

Ada pembaruan pada posting yang menargetkan masalah itu. Pada orang tua: transform-style: preserve-3d;!

— Andry

8

Anda dapat menggunakan tinggi Garis sebesar tinggi div. Tetapi bagi saya solusi terbaik adalah ini ->position:relative; top:50%; transform:translate(0,50%);

— Andris
sumber

4

Bagaimana jika menambahkan line-height?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Biola, tinggi garis

Atau paddingdi #abc. Inilah hasil dengan padding

Memperbarui

Tambahkan css Anda:

#abc img{
   vertical-align: middle;
}

Hasilnya . Semoga ini yang Anda cari.

— Aldi Unanto
sumber

tidak berfungsi seperti yang saya inginkan, saat Anda mengubah tinggi atau tinggi garis, ada sesuatu yang tidak beres. sudah mendapat jawaban, terima kasih

— Sickest

2

Coba ini:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Metode lain untuk memusatkan div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

— Teman
sumber

2

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

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

<div class="text-align-center"> Align center</div>

Luaskan cuplikan

— Fouzia Khan
sumber

Tolong jelaskan itu!

— Szabolcs Páll

1

Gunakan properti translateY CSS untuk memusatkan teks Anda secara vertikal di penampungnya

<style>
.centertext{

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

}
</style>

Dan kemudian terapkan ke DIV yang Anda miliki

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Sesuaikan persentase translateY dengan kebutuhan Anda. Semoga ini membantu

— Hondaman900
sumber

1

Kode Ini Adalah untuk Vertical Middle dan Horizontal Center Align tanpa menentukan ketinggian tetap:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

Luaskan cuplikan

— nilesh pawar
sumber