css垂直对齐浮动div

你好我有一个div(#wrapper)包含2个divs并排。我想右右对齐。我尝试vertical-align:中间在我的主要包装,但它不工作。它驱使我疯了!希望有人可以帮助。预先感谢您的回复。干杯。马克。

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;}
你没有浮动元素的运气。他们不服从垂直对齐,

你需要,显示:inline-block代替:

http://cssdesk.com/2VMg8

谨防

注意显示:inline-block;因为它将元素之间的白色空间解释为真实的白色空间。它不会像显示:block那样忽略它。

我推荐这:

将包含元素的字体大小设置为0(零),并将字体大小重置为元素中所需的值,如此

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;
}
http://stackoverflow.com/questions/9430929/css-vertically-align-floating-divs

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:css垂直对齐浮动div