css垂直对齐浮动div [英] css vertically align floating divs

问题描述

Hello我有一个div（#wrapper）包含2个divs并排。我想右右对齐。我尝试vertical-align：中间在我的主要包装，但它不工作。它驱使我疯了！希望有人可以帮助。预先感谢您的回复。干杯。 Marc。

http://cssdesk.com/LWFhW

我的HTML：

 < div id =wrapper> 
< div id =left-div> 
< ul> 
< li>一个< / li> 
< li>两个< / li> 
< / ul> 
< / div> 
< div id =right-div> 
这里有一些文本... 
< / 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

BEWARE

---

小心 display：inline-block; code>，因为它将元素之间的白色空间解释为实际的白色空间。它不会像 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

---

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

Hello I have a div (#wrapper) containing 2 divs standing side by side. I would like the right-div to be vertically aligned. I tried vertical-align:middle on my main wrapper but it is not working. It is driving me crazy! Hope someone can help. Thank you in advance for your replies. Cheers. Marc.

http://cssdesk.com/LWFhW

My 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>

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

解决方案

You have no luck with floated elements. They don't obey vertical-align,

you need, display:inline-block instead:

http://cssdesk.com/2VMg8

BEWARE

---

Be careful with display: inline-block; as it interpretes the white-space between the elements as real white-space. It does not ignores it like display: block does.

I recommend this:

Set the font-size of the containing element to 0 (zero) and reset the font-size to your needed value in the elements like so

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

See a demonstration here: 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;
}

这篇关于css垂直对齐浮动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！