Bagaimana cara menyelaraskan elemen vertikal dalam div?

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

Salah satu gambar perlu absolutediposisikan 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>

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

Memahami vertical-align, atau "Bagaimana (Tidak) Memusatkan Konten Secara Vertikal" 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.

Singkatnya _{^{(dan untuk mencegah pembusukan tautan)}} :

• Elemen sebaris (dan hanya elemen sebaris) dapat disejajarkan secara vertikal dalam konteksnya melalui vertical-align: middle. Namun, "konteks" bukan tinggi kontainer induk keseluruhan, itu adalah ketinggian dari baris teks yang mereka gunakan . 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 absolutedan menentukan height, margin-topdan topposisinya. contoh jsfiddle
  • Jika elemen tengah terdiri dari satu baris dan tinggi induknya tetap, Anda dapat dengan mudah mengatur wadah line-heightuntuk mengisi tingginya. Metode ini cukup fleksibel dalam pengalaman saya. contoh jsfiddle
  • ... ada lebih banyak kasus khusus seperti itu.

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

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 a .classatau a #id, hasilnya tidak akan berubah.

Ini bekerja untuk saya:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

 .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

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

Semuanya perlu disejajarkan secara vertikal di dalam div

Menyelaraskan 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 H1elemen sedemikian rupa sehingga gambar akan muncul sejalan dengannya. Untuk itu, saya akan menambahkan bahwa Anda dapat menyelaraskan gambar dengan menggunakan vertical-aligngaya:

#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 juga mungkin merasa bermanfaat untuk menjatuhkan DIV dan memindahkan gambar ke dalam H1elemen - ini memberikan nilai semantik ke wadah, dan menghilangkan kebutuhan untuk menyesuaikan tampilan H1:

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

Gunakan formula 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>

Hampir semua metode perlu menentukan ketinggian, tetapi seringkali kita tidak memiliki ketinggian.
Jadi di sini adalah trik 3 baris CSS3 yang tidak perlu tahu 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/

Dengan dua cara, Anda dapat menyelaraskan elemen secara vertikal dan horizontal

1. Bootstrap 4
2. CSS3

1. Bootstrap 4.3.X

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

untuk penyelarasan 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;  // verticall center
    justify-content: center; // horizontally 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>

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/

# 3 cara untuk membuat div anak tengah di div orang tua

• Metode Penentuan Posisi Absolut
• Metode Flexbox

• Metode Transform / Terjemahkan

  

  Demo

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

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

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

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.

MEMPERBARUI:

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>

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 div heightdan responsifwidth juga.

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

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!

Cara favorit baru saya untuk melakukannya adalah dengan kisi CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

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 mundur ke Zaman Batu!

Saya telah menggunakan solusi berikut (tanpa posisi dan tidak ada 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>

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

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.

menggunakan tampilan flex, pertama-tama Anda harus membungkus wadah item yang ingin Anda selaraskan.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

kemudian terapkan css berikut ke wrapper div atau outdiv dalam contoh saya

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

Hanya ini:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Berikut ini hanyalah pendekatan (responsif) yang lain:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Saya seorang. NET guy yang baru saja masuk ke pemrograman web. Saya tidak menggunakan CSS (well, sedikit). Saya menggunakan sedikit JavaScript untuk menyelesaikan pemusatan vertikal bersama dengan fungsi .css jQuery.

Saya hanya memposting semuanya dari pengujian saya. Ini mungkin tidak terlalu elegan, tetapi sejauh ini berhasil.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

<div id="header" style="display: table-cell; vertical-align:middle;">

...

atau CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Cakupan Browser