如何垂直對齊div？

Question

我有以下example：

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

正如你可以在代碼中沒有垂直對齊見左上格：

但如果我刪除浮動：右則左格被垂直排列好： example

請幫助我如何使垂直對齊左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

基本上，您只需設置一個行高到您的權利股利。

所以它看起來像這樣：

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

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

Answer 4

我已將此添加。左類：

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

使用 '靈活的盒子佈局模塊' 做這件事。這是簡單和最佳解決方案。對於完整的stackoverflow後和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; 
}