CSS垂直alignment浮动div

你好，我有一个div（#wrapper）包含2个div并排站立。 我想右边的div被垂直alignment。 我在我的主包装上尝试了垂直alignment：中间，但它不工作。 这让我疯狂！ 希望有人能帮忙。 预先感谢您的回复。 干杯。 马克。

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

Answer 1

浮动的元素你没有运气。 他们不服从垂直alignment，

你需要display:inline-block代替：

http://cssdesk.com/2VMg8

谨防

---

display: inline-block;要小心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; } 

Answer 2

你可以用显示表格和显示表格单元格很容易地做到这一点。

 #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

Answer 3

我意识到这是一个古老的问题，但我认为这将是有益的浮动垂直alignment问题的解决scheme。

通过在你想浮动的内容周围创build一个包装器，你可以使用:: after或者:: before伪select器在你的包装器中垂直alignment你的内容。 您可以在不影响alignment的情况下调整所需内容的大小。 唯一的问题是包装纸必须填满容器的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; } 

Answer 4

我的修改唯一的缺点是你有一个设置的高度…我不知道这是否对你来说是一个问题。

http://cssdesk.com/kyPhC