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