VerticalAlign圖像位置

Question

我需要在textarea高度中間找到該問題圖標。
垂直對齊確實起作用。

我主要的div .contorls，我的鏈接有問題與float:right內部和文本區域之後。
如何找到這個圖標？

<div class="control"> 
    <textarea></textarea> 
    <div class="icon"></div> 
</div> 

.control{width:700px;height:auto;} 
.icon{height:20px;width:20px;} 

Answer 1

這是一個相當簡單的方法來做到這一點。

通過將display: table應用於.control父元素並將display: table-cell應用於.wrapper子元素來使用CSS表。在.wrapper內，使用vertical-align: middle將圖標元素垂直居中。

大多數現代瀏覽器都很好地支持CSS表，因此該解決方案非常強大。

.control { 
 
    display: table; 
 
    width: 700px; 
 
    height: auto; 
 
    border: 1px dotted blue; 
 
} 
 
.control .wrapper { 
 
    display: table-cell; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px dashed blue; 
 
    vertical-align: middle; 
 
} 
 
.icon { 
 
    height: 20px; 
 
    width: 20px; 
 
    margin-left: 5px; /* optional if needed */ 
 
    background-color: tan; 
 
    display: inline-block; 
 
}

<div class="control"> 
 
    <textarea></textarea> 
 
    <div class="wrapper"> 
 
    <div class="icon"></div> 
 
    </div> 
 
</div>