無論div展開如何在垂直中間製作圖標

Question

我希望警告圖標始終顯示在垂直中間。在我的情況下，錯誤信息的數量將會改變。

以下是我的代碼，輸出的截圖還附有。

任何人都可以幫助我嗎？非常感謝！

<style type="text/css"> 
    #errorMessage{ 
     padding:5px; 

    } 

    #icon, #message{ 
     float:left; 
     padding: 5px; 
     border:#666 1px solid; 
    } 

</style> 


<div id="errorMessage"> 
    <div id="icon"> 

     <img src="images/Warning.png" alt="success" width="28px" /> 

    </div> 
    <div id="message"> 
     <p>Message1 Message1 Message1 Message1 Message1</p> 
     <p>Message2 Message2 Message2 Message2 Message2</p> 
    </div> 
</div> 

Answer 1

個人而言，我會做一點點不同。我會使圖標成爲整個div的背景圖像，添加一點填充，然後將其垂直居中，如下所示：jsFiddle example。無論容器因背景CSS位置爲50％而變得多高，圖像始終處於中間位置。

HTML：

<div id="errorMessage"> 
    <div id="message"> 
     <p>Message1 Message1 Message1 Message1 Message1</p> 
     <p>Message2 Message2 Message2 Message2 Message2</p> 
     <p>Message1 Message1 Message1 Message1 Message1</p> 
     <p>Message2 Message2 Message2 Message2 Message2</p>   
    </div> 
</div> 

CSS：

#errorMessage{ 
    padding:5px 5px 5px 40px; 
    overflow:auto; 
    background: url(http://cdn1.iconfinder.com/data/icons/oxygen/32x32/actions/list-remove.png) no-repeat 0% 50%; 
} 

#message{ 
    float:left; 
    padding: 5px; 
    border:#666 1px solid; 
}