一尘不染

CSS垂直对齐浮动div

css

我有一个div（#wrapper），其中包含2个并排站立的div。

我希望将右div垂直对齐。我在主包装器上尝试了vertical-align：middle，但是它不起作用。它让我发疯！

希望有人能帮忙。

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

阅读 711

2020-05-16

共1个答案

一尘不染

您没有浮点元素的运气。他们不服从垂直对齐，

您需要的是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;
}

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

2020-05-16