2つのdivが並んでいるdiv（#wrapper）があります。

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

浮いた要素では運がありません。彼らは垂直整列に従わない、

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

これは、displaytableとdisplaytable-cellを使用すると非常に簡単に実行できます。

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

編集：実際にはすぐにCSSデスクをいじりまわしました-http：//cssdesk.com/RXghg

別の編集： Flexboxを使用します。これは機能しますが、かなり時代遅れです-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;
}

これは古代の質問だと思いますが、フロートの垂直方向の配置の問題に対する解決策を投稿すると便利だと思いました。

フロートさせたいコンテンツのラッパーを作成することで、:: afterまたは:: before疑似セレクターを使用して、ラッパー内でコンテンツを垂直方向に整列させることができます。そのコンテンツのサイズは、配置に影響を与えることなく、必要に応じて調整できます。唯一の難点は、ラッパーの100％の高さを埋める必要があるということですそのコンテナを。

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

考えられる解決策は、https：//spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/で指定されdiv flexているcenterようにアイテムを配置してラッパーを作成することです。

フロートの使用を避けるために最善を尽くします...しかし、必要に応じて、次の行を使用して中央に垂直に配置します。

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

私の変更の唯一の欠点は、divの高さが設定されていることです...それがあなたにとって問題であるかどうかはわかりません。

http://cssdesk.com/kyPhC