Saya memiliki div (#wrapper) yang berisi 2 div yang berdiri berdampingan.

Saya ingin div kanan sejajar secara vertikal. Saya mencoba vertical-align: middle pada pembungkus utama saya tetapi tidak berhasil. Itu membuatku gila!

Semoga seseorang bisa membantu.

http://cssdesk.com/LWFhW

HTML:

<div id="wrapper">
  <div id="left-div">
    <ul>
      <li>One</li>
      <li>Two</li>
    </ul>
  </div>  
  <div id="right-div">
    Here some text...
  </div>
</div>

CSS:

#wrapper{
  width:400px;
  float:left;
  height:auto;
  border:1px solid purple;}

#left-div{
  width:40px;
  border:1px solid blue;
  float:left;}

#right-div{
  width:350px;
  border:1px solid red;
  float:left;}

ul{
  list-style-type: none;
  padding:0;
  margin:0;}

Anda tidak beruntung dengan elemen mengambang. Mereka tidak mematuhi perataan vertikal,

yang Anda butuhkan, display:inline-blocksebagai gantinya:

http://cssdesk.com/2VMg8

AWAS

Berhati-hatilah display: inline-block;karena ini menafsirkan ruang putih antara elemen sebagai ruang putih nyata. Itu tidak mengabaikannya seperti display: blockhalnya.

Saya merekomendasikan ini:

Setel font-sizeelemen penampung ke 0(nol) dan setel ulang font-sizeke nilai yang Anda butuhkan di elemen seperti itu

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
ul > li {
    font-size: 12px;
}

Lihat demonstrasi di sini: http://codepen.io/HerrSerker/pen/mslay

CSS

#wrapper{
  width:400px;
  height:auto;
  border:1px solid green;
  vertical-align: middle;
  font-size: 0;
}

#left-div{
  width:40px;
  border:1px solid blue;
  display: inline-block;
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}

#right-div{
  width:336px;
  border:1px solid red;
  display: inline-block;  
  font-size: initial;
  /* IE 7 hack */
  *zoom:1;
  *display: inline;
  vertical-align: middle;
}
  

Anda dapat melakukan ini dengan cukup mudah dengan tampilan tabel dan tampilan sel tabel.

#wrapper {
    width: 400px;
    float: left;
    height: auto;
    display: table;
    border: 1px solid green;
}

#right-div {
    width: 356px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
}

EDIT: Sebenarnya dengan cepat mengotak-atik CSS Desk untuk Anda - http://cssdesk.com/RXghg

EDIT LAINNYA: Gunakan Flexbox. Ini akan berfungsi tetapi cukup usang - http://www.cssdesk.com/davf5

#wrapper {
    display: flex;
    align-items: center;
    border:1px solid green;
}

#left-div {
    border:1px solid blue;
}

#right-div {
    border:1px solid red;
}

Saya menyadari ini adalah pertanyaan kuno namun saya pikir akan berguna untuk memposting solusi untuk masalah pelurusan vertikal float.

Dengan membuat pembungkus di sekitar konten yang ingin Anda mengambang, Anda kemudian dapat menggunakan pemilih semu :: after atau :: before untuk menyelaraskan konten Anda secara vertikal di dalam pembungkus. Anda dapat menyesuaikan ukuran konten itu semau Anda tanpa memengaruhi perataan. Satu-satunya menangkap adalah bahwa bungkusnya harus mengisi ketinggian 100% dari yang kontainer.

http://jsfiddle.net/jmdrury/J53SJ/

HTML

<div class="container">
    <span class="floater">
        <span class="centered">floated</span>
    </span>
    <h1>some text</h1>
</div>

CSS

div {
    border:1px solid red;
    height:100px;
    width:100%;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.floater {
    float:right;
    display:inline-block;
    height:100%;
    box-sizing: border-box;
}
.centered {
    border:1px solid blue;
    height: 30px;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
h1 {
    margin:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
    height:100%;
    content:'';
    font-size:0;
    vertical-align:middle;
    display:inline-block;
    box-sizing: border-box;
}

Solusi yang mungkin adalah membuat pembungkus div flexdengan item yang diselaraskan centerseperti yang ditentukan oleh https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/ .

Saya melakukan yang terbaik untuk menghindari penggunaan pelampung ... tetapi - bila diperlukan, saya secara vertikal menyelaraskan ke tengah menggunakan baris berikut:

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

Satu-satunya kelemahan dari modifikasi saya adalah Anda memiliki ketinggian div yang ditetapkan ... Saya tidak tahu apakah itu masalah bagi Anda atau tidak.

http://cssdesk.com/kyPhC