css - 无论 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 示例一样垂直居中。由于背景 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;
}