it-swarm-id.com

Bagaimana cara menyelaraskan elemen vertikal dalam div?

Saya memiliki div dengan dua gambar dan h1. Semuanya perlu disejajarkan secara vertikal di dalam div, di samping satu sama lain.

Salah satu gambar harus diposisikan absolute dalam div.

Apa yang dibutuhkan CSS untuk bekerja di semua browser umum?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
646
Abdu

Wow, masalah ini sangat populer. Ini didasarkan pada kesalahpahaman di properti vertical-align. Artikel yang luar biasa ini menjelaskannya:

Memahami vertical-align, atau "How (Not) To Vertically Center Content" oleh Gavin Kistner.

“Bagaimana cara memusatkan pada CSS”adalah alat web yang bagus yang membantu untuk menemukan atribut pemusatan CSS yang diperlukan untuk situasi yang berbeda.


Pendeknya (dan untuk mencegah pembusukan tautan):

  • Elemen sebaris (dan hanya elemen sebaris) dapat disejajarkan secara vertikal dalam konteksnya melalui vertical-align: middle. Namun, "konteks" bukan ketinggian wadah induk keseluruhan, itu adalah ketinggian dari baris teks tempat mereka berada. contoh jsfiddle
  • Untuk elemen blok, perataan vertikal lebih sulit dan sangat tergantung pada situasi spesifik:
    • Jika elemen dalam dapat memiliki ketinggian tetap , Anda dapat membuat posisinya absolute dan tentukan posisi height, margin-top dan top. contoh jsfiddle
    • Jika elemen tengah terdiri dari satu baris dan tinggi induknya tetap Anda cukup mengatur line-height wadah untuk mengisi ketinggiannya. Metode ini cukup fleksibel dalam pengalaman saya. contoh jsfiddle
    • ... ada lebih banyak kasus khusus seperti itu.
816
Konrad Rudolph

Sekarang dukungan flexbox meningkat, CSS ini diterapkan pada elemen yang mengandung akan memusatkan secara vertikal item yang terkandung:

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

Gunakan versi awalan jika Anda juga perlu menargetkan Explorer 10, dan browser Android lama (<4.4):

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
109
E. Serrano

Saya menggunakan kode yang sangat sederhana ini:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Jelas, apakah Anda menggunakan .class atau #id, hasilnya tidak akan berubah.

104
user2346571

Ini bekerja untuk saya:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
44
Romain
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Sebuah teknik dari seorang teman saya:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO di sini

21
abernier

Untuk memposisikan elemen blok ke tengah (berfungsi di IE9 ke atas), perlu pembungkus div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
16
Blacksonic

Semuanya perlu disejajarkan secara vertikal di dalam div

Diselaraskan bagaimana ? Bagian atas gambar selaras dengan bagian atas teks?

Salah satu gambar harus diposisikan mutlak dalam div.

Benar-benar diposisikan relatif terhadap DIV? Mungkin Anda bisa membuat sketsa apa yang Anda cari ...?

fd telah menjelaskan langkah-langkah untuk penentuan posisi absolut, serta menyesuaikan tampilan elemen H1 sedemikian rupa sehingga gambar akan muncul sejalan dengannya. Untuk itu, saya akan menambahkan bahwa Anda dapat menyelaraskan gambar dengan menggunakan gaya vertical-align:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... ini akan menyatukan header dan gambar, dengan tepi atas rata. Opsi perataan lainnya ada; lihat dokumentasi . Anda mungkin juga merasa bermanfaat untuk menjatuhkan DIV dan memindahkan gambar ke dalam elemen H1 - ini memberikan nilai semantik ke wadah, dan menghilangkan kebutuhan untuk menyesuaikan tampilan H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
16
Shog9

Gunakan rumus ini, dan itu akan bekerja selalu tanpa celah:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For Explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For Explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>
15
Anita Mandal

Trik saya adalah meletakkan di dalam div tabel dengan 1 baris dan 1 kolom, atur 100% lebar dan tinggi, dan properti vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/

11
joan16v

Hampir semua metode perlu menentukan ketinggian, tetapi seringkali kita tidak memiliki ketinggian.
Jadi, inilah trik CSS3 3 baris yang tidak perlu diketahui ketinggiannya.

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

Ini didukung bahkan di IE9.

dengan awalan vendornya:

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

Sumber: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

10
Shadowbob

Kami dapat menggunakan perhitungan fungsi CSS untuk menghitung ukuran elemen dan kemudian memposisikan elemen anak sesuai.

Contoh HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Dan CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo dibuat di sini: https://jsfiddle.net/xnjq1t22/

Solusi ini bekerja dengan baik dengan divheight dan width yang responsif.

Catatan: Fungsi calc tidak diuji untuk kompatibilitas dengan browser lama.

3
Dashrath

Secara default h1 adalah elemen blok dan akan di-render pada baris setelah img pertama, dan akan menyebabkan img kedua muncul di baris setelah blok.

Untuk menghentikan hal ini terjadi, Anda dapat mengatur h1 agar memiliki perilaku aliran sebaris:

#header > h1 { display: inline; }

Sedangkan untuk benar-benar memposisikan img di dalam div , Anda perlu mengatur div yang berisi memiliki "ukuran yang diketahui" sebelum ini akan berfungsi dengan baik. Dalam pengalaman saya, Anda juga perlu mengubah atribut posisi dari default - position: relative berfungsi untuk saya:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Jika Anda bisa membuatnya berfungsi, Anda mungkin ingin mencoba secara progresif menghapus atribut tinggi, lebar, posisi dari div.header untuk mendapatkan atribut minimal yang diperlukan untuk mendapatkan efek yang Anda inginkan.

PEMBARUAN:

Berikut adalah contoh lengkap yang berfungsi di Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>
3
Mike Tunnicliffe

Menggunakan CSS ke pusat vertikal, Anda bisa membiarkan wadah luar bertindak seperti tabel, dan konten sebagai sel tabel. Dalam format ini objek Anda akan tetap terpusat. :)

Saya bersarang beberapa objek di JSFiddle sebagai contoh, tetapi gagasan intinya adalah seperti ini:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Contoh beberapa objek:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Hasil

 Result

https://jsfiddle.net/martjemeyer/ybs032uc/1/

3
Henk-Martijn

Per hari ini, saya telah menemukan solusi baru untuk meluruskan beberapa baris teks secara vertikal dalam div menggunakan CSS3 (dan saya juga menggunakan sistem grid bootstrap v3 untuk mempercantik UI), yaitu sebagai berikut:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Sesuai pemahaman saya, orang tua langsung dari elemen yang mengandung teks harus memiliki ketinggian. Saya harap ini akan membantu Anda juga. Terima kasih!

2
Shivam

Cukup gunakan tabel satu sel di dalam div! Cukup atur tinggi sel dan tabel dan dengan hingga 100% dan Anda dapat menggunakan penyelarasan vertikal.

Tabel satu sel di dalam div menangani perataan vertikal dan kompatibel dengan mundur ke Zaman Batu!

1
Joel Moses

Bagi saya, itu bekerja seperti ini:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

Elemen "a" dikonversi menjadi tombol, menggunakan kelas Bootstrap, dan sekarang dipusatkan secara vertikal di dalam "div" luar.

0
BernieSF

Ini adalah solusi pribadi saya untuk elemen i di dalam div

Contoh JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}
0
danigonlinea

Ada dua cara untuk menyelaraskan elemen secara vertikal dan horizontal

1. Bootstrap 4.3.X

untuk perataan vertikal: d-flex align-items-center

untuk perataan horisontal: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>
0
WasiF

Saya telah menggunakan solusi berikut (tanpa posisi dan tanpa ketinggian garis) sejak lebih dari setahun, ia bekerja dengan IE 7 dan 8 juga.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
0
Arsh