Question

我有以下example：

<div class="container">
  <div class="left"></div>
  <div class="right">
    <span class="number">1</span>
    <span class="number">2</span>
  </div>
</div>

正如您在上面的代码中看到的那样，左侧div没有垂直对齐： enter image description here

但是如果我移除浮动：右边然后左边的div垂直对齐得很好：example enter image description here

请帮助我如何将右侧浮动右侧div垂直对齐左侧div？

编辑：你能提供没有填充，边距，顶部，左边等的解决方案吗？

Answer 1

你不能，因为它是浮动的。您必须手动为左侧div分配正确的margin，为右侧div分配line-height，height和margin（或使用绝对/相对定位，即我尽可能避免。像这样：

.container {
  width: 100px; 
  background: #e7e7e7;
  height: 20px;
}

.left {
  float: left;
  width: 10px; 
  height: 10px; 
  margin: 5px 0;
  background: red;
}

.right {
  float:right;
  height: 16px;
  line-height: 16px;
  margin: 2px 0;
}

此外，如果您不想将height属性分配给容器类，则必须在最后一个浮动元素之后使用clear: both以确保容器将向右调整高度。

Answer 2

尝试：

HTML：

<div class="left">
    <span class="bullet"></span>
</div>

CSS：

.bullet {
    width:10px;
    height:10px;
    background: red;
    display: inline-block;
    vertical-align: bottom;
}
.left {
    float:left;
}
.right {
    float:right;
}

DEMO here.

Answer 3

基本上，您只需将行高设置为右侧div。

所以它看起来像这样：

.right {
   display: inline-block;
   padding: 5px;
   float: right;
   line-height: 15px;
}

http://jsbin.com/ohonaYu/9/

Answer 4

我将此添加到.left类：

 position:relative;
 top:4px;

http://jsbin.com/ohonaYu/8/

Answer 5

您可以使用伪元素：使用.container:before而不是左元素。在这里小提琴：http://jsbin.com/ohonaYu/12/edit?html,css,output

Answer 6

使用绝对和相对定位：

.container {
  width: 100px; 
  background: #e7e7e7;
  overflow:auto;
  position: relative;
  height: 30px;  
}

.left {
  width:10px; 
  height:10px; 
  background: red;  
  position: absolute;
  left: 0;
  bottom: 10px;
}

.right {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px;
}

示例： http://jsbin.com/ohonaYu/14/edit

Answer 7

使用＆＃39;灵活的盒子布局模块＆＃39;这样做。这是简单和最佳解决方案。对于完整的stackoverflow post和codpen Go Here。

<div class="center">
      <div>
            <h4>
                  I am at center
            </h4>
      </div>
</div>


.center {
      /*this is for styling */
      height: 100px;
      margin: 1em;
      color:#fff;
      background: #9f5bd0;

      /*you just have to use this */
      display: flex;
      justify-content:center;
      align-items:center;
}

如何垂直对齐div？

7 个答案: