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