我怎样才能对齐到中间高度

这个问题在这里已经有了答案:

  • 垂直和水平在页面上居中放置<div>的最佳方法是什么? 29个答案
  • 我如何垂直居中文本与CSS? 34个答案

  • 通常工作正常的是line-height

    line-height: 32px;
    

    http://jsfiddle.net/DhHnZ/2/


    如果要用多行对齐一个块,可以在该块周围使用display:inline-block block。 所以如果你有:

    <div class="messageInfo">
       <div class="messageInner">You are logged out<br>You are crazy<br> gogo</div>
    </div>
    

    .messageInfo{
        background: lightskyblue;
        background-image: url(http://i.stack.imgur.com/Z6lkS.png) ;
        background-repeat: no-repeat;
        min-height: 32px;
        vertical-align: middle;
        padding-left:32px;
        line-height:32px;
    }
    

    .messageInner {
        display:inline-block;
        line-height:1.2em;
        vertical-align:middle;
    }
    

    请参阅http://jsfiddle.net/yNpRE/1/和http://jsfiddle.net/yNpRE/

    尽管如此,尽管这在现代浏览器中有效,但它不适用于IE7或更早版本。


    line-height设置为divheight

    所以

    .messageInfo{
        background: lightskyblue;
        background-image: url(http://i.stack.imgur.com/Z6lkS.png) ;
        background-repeat: no-repeat;
        min-height: 32px;
        vertical-align: middle;
        padding-left:32px;
        line-height:32px; //ADD THIS
    }
    

    工作示例: http : //jsfiddle.net/jasongennaro/DhHnZ/1/

    链接地址: http://www.djcxy.com/p/41657.html

    上一篇: how can I align to middle by height

    下一篇: center h1 in the middle of screen