Yan yana duran 2 div içeren bir div (#wrapper) var.

Sağ div'in dikey olarak hizalanmasını istiyorum. Dikey hizalamayı denedim: ana sarmalayıcımda ortayı denedim ama çalışmıyor. Beni deli ediyor!

Umarım birisi yardım edebilir.

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

Yüzen öğeler konusunda hiç şansınız yok. Dikey hizalamaya uymazlar,

display:inline-blockbunun yerine ihtiyacınız var :

http://cssdesk.com/2VMg8

DİKKAT

display: inline-block;Öğeler arasındaki beyaz boşluğu gerçek beyaz boşluk olarak yorumladığından dikkatli olun . Yaptığı gibi görmezden display: blockgelmez.

Bunu tavsiye ederim:

Set font-sizeiçeren elemanının 0(sıfır) ve reset font-sizeelemanları böylece gibi içinde gerekli değere

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

Burada bir gösterime bakın: 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;
}
  

Bunu ekran tablosu ve ekran tablo hücresi ile oldukça kolay bir şekilde yapabilirsiniz.

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

DÜZENLEME: Sizin için CSS Masasında gerçekten hızlı bir şekilde uğraştı - http://cssdesk.com/RXghg

BAŞKA BİR DÜZENLEME: Flexbox'ı kullanın. Bu işe yarayacak ancak oldukça modası geçmiş - 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;
}

Bunun eski bir soru olduğunun farkındayım, ancak kayan dikey hizalama sorununa bir çözüm göndermenin faydalı olacağını düşündüm.

Yüzen olmasını istediğiniz içeriğin etrafında bir sarmalayıcı oluşturarak, içeriğinizi sarmalayıcı içinde dikey olarak hizalamak için :: after veya :: before sözde seçicileri kullanabilirsiniz. Bu içeriğin boyutunu, hizalamayı etkilemeden istediğiniz kadar ayarlayabilirsiniz. Sadece yakalamak sargı% 100 dolma yüksekliği olmasıdır kendi kap.

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

Olası bir çözüm, sarmalayıcıyı https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/ tarafından belirtildiği şekilde div flexhizalanmış öğelerle yapmaktır .center

Şamandıra kullanmaktan kaçınmak için elimden geleni yapıyorum ... ama - gerektiğinde, aşağıdaki satırları kullanarak dikey olarak ortaya hizalıyorum:

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

Değişikliklerimin tek dezavantajı, belirli bir div yüksekliğinizin olması ... Bunun sizin için bir sorun olup olmadığını bilmiyorum.

http://cssdesk.com/kyPhC