0

我希望警告图标始终显示在垂直中间。就我而言,错误消息的数量将被更改。

以下是我的代码,还附上了输出截图。在此处输入图像描述

谁能帮我?非常感谢!

<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>
4

1 回答 1

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;
}
于 2012-04-12T16:11:43.937 回答