首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS垂直对齐浮动div

CSS垂直对齐浮动div
EN

Stack Overflow用户
提问于 2012-02-24 20:39:19
回答 4查看 169K关注 0票数 92

我有一个包含两个并排的div的div (#wrapper)。

我希望右div垂直对齐。我尝试了在我的主包装器上垂直对齐: wrapper,但它不起作用。它快把我逼疯了!

希望有人能帮上忙。

http://cssdesk.com/LWFhW

HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
#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;}
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-02-24 20:52:12

你在使用浮动元素时就不走运。他们不服从垂直排列,

您需要的是display:inline-block

http://cssdesk.com/2VMg8

当心

小心使用display: inline-block;,因为它将元素之间的空白解释为真正的空白。它不会像display: block那样忽略它。

我推荐这样做:

将包含元素的font-size设置为0 (零),并将元素中的font-size重置为所需的值,如下所示

代码语言:javascript
复制
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}
ul > li {
    font-size: 12px;
}

请在此处查看演示:http://codepen.io/HerrSerker/pen/mslay

CSS

代码语言:javascript
复制
#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;
}
票数 68
EN

Stack Overflow用户

发布于 2018-03-24 01:29:31

一种可能的解决方案是使wrapper div flexhttps://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/指定的center上的项对齐。

票数 4
EN

Stack Overflow用户

发布于 2018-12-10 17:28:51

我尽量避免使用浮点数...但是-当需要时,我使用以下几行垂直对齐到中间:

代码语言:javascript
复制
position: relative;
top: 50%;
transform: translateY(-50%);
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9430929

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档