質問

div (#wrapper) の中に2つのdivが並んで入っています。

私は右のdivを垂直方向に整列させたいと思います。メインのラッパーでvertical-align:middleを試してみましたが、うまくいきません。これは私を狂わせます!

誰かが助けてくれることを願っています。

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

どのように解決するのですか？

あなたは、フローティング要素で運がありません。彼らはvertical-alignに従わない。

が必要です。 display:inline-block の代わりに

http://cssdesk.com/2VMg8

注意事項

注意すること display: inline-block; は要素間の空白を本当の空白として解釈してしまうので注意が必要です。のように無視するわけではありません。 display: block のように無視することはありません。

これをお勧めします。

を設定します。 font-size を含む要素の 0 (ゼロ) にリセットし font-size を必要な値に設定します。

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

デモはこちら 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;
}