Tôi có một div (#wrapper) chứa 2 div đứng cạnh nhau.

Tôi muốn div bên phải được căn chỉnh theo chiều dọc. Tôi đã thử vertical-align: middle trên trình bao bọc chính của mình nhưng nó không hoạt động. Nó đang khiến tôi phát điên!

Hy vọng ai đó có thể giúp đỡ.

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

Bạn không gặp may với các yếu tố trôi nổi. Họ không tuân theo căn chỉnh dọc,

bạn cần, display:inline-blockthay vào đó:

http://cssdesk.com/2VMg8

CHĂM SÓC

Hãy cẩn thận display: inline-block;vì nó diễn giải khoảng trắng giữa các phần tử là khoảng trắng thực. Nó không bỏ qua nó như display: blockkhông.

Tôi đề nghị điều này:

Đặt font-sizephần tử chứa thành 0(không) và đặt lại thành font-sizegiá trị cần thiết của bạn trong các phần tử như vậy

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

Xem trình diễn ở đây: 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;
}
  

Bạn có thể làm điều này khá dễ dàng với bảng hiển thị và ô bảng hiển thị.

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

CHỈNH SỬA: Trên thực tế đã nhanh chóng lộn xộn trên CSS Desk cho bạn - http://cssdesk.com/RXghg

CHỈNH SỬA KHÁC: Sử dụng Flexbox. Điều này sẽ hoạt động nhưng nó khá lỗi thời - 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;
}

Tôi nhận ra đây là một câu hỏi cổ hủ tuy nhiên tôi nghĩ sẽ hữu ích nếu đăng một giải pháp cho vấn đề căn chỉnh theo chiều dọc nổi.

Bằng cách tạo một trình bao bọc xung quanh nội dung bạn muốn nổi, sau đó bạn có thể sử dụng bộ chọn :: after hoặc :: before giả để căn chỉnh theo chiều dọc nội dung của bạn trong trình bao bọc. Bạn có thể điều chỉnh kích thước của nội dung đó tất cả những gì bạn muốn mà không ảnh hưởng đến việc căn chỉnh. Trở ngại duy nhất là các wrapper phải lấp đầy 100% chiều cao của nó chứa.

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

Một giải pháp khả thi là tạo trình bao bọc div flexvới các mục được căn chỉnh centertheo chỉ định bởi https://spin.atomicobject.com/2016/06/18/verently-center-floated-elements-flexbox/ .

Tôi cố gắng hết sức để tránh sử dụng phao ... nhưng - khi cần, tôi căn chỉnh theo chiều dọc ở giữa bằng các dòng sau:

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

Sự sụp đổ duy nhất của các sửa đổi của tôi là bạn có chiều cao div đã đặt ... Tôi không biết đó có phải là vấn đề với bạn hay không.

http://cssdesk.com/kyPhC