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; 
}