Question

I would like the Warning icon is always displayed in the vertical middle. In my case, the number of error message will be changed.

The following is my code, the output screenshot also attached.

can anyone help me? Many thanks!

<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

Personally I’d do it a little differently. I’d make the icon a background image of the overall div, add a little padding and then center it vertically like this jsFiddle example. The image will always be in the middle no matter how tall the container gets due to the background CSS position of 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;
}