Question

为什么这一例子中的案文:。 http://jsfiddle.net/7EYZe/。不是在垂直中心?

我怎么能够讨论案文?

EDIT:
Now I have two or more lines of text: http://jsfiddle.net/7EYZe/12/

How can I display this properly?

Answer 1

The following css will central text in a div by using patter rather than high:

 .centerText
    {
        padding: 90px 0;
        font-size: 18px;
        border:solid 1px #000;
    }

Answer 2

这对<代码>垂直-align的使用不正确。它不了解纵向统一的目标是什么。

这里是一个动态的无表格解决办法:。 http://jsfiddle.net/imoda/7EYZe/14/。

<style type="text/css">
    div {
        height:200px;    
        width:200px;
        border:solid 1px black;
    }

    .aligner {
        height: 100%;
        width: 0;
        display: inline-block;
        vertical-align: middle;
    }

    .align {
        display: inline-block;
        vertical-align: middle;
    }
</style>

<div>
    <span class="aligner"></span>
    <span class="align">blabla</span>
</div>

Answer 3

添加文字字体:中心;显示:桌子;在盒子中集中。

div {
    height:200px;    
    width:200px;
    border:solid 1px black;
    text-align: center;
    vertical-align:middle;
    display: table-cell;
}

Answer 4

零四在环绕的任何地方都垂直地连接起来。这不影响内面的东西。使其规模缩小,事实上消除了阴道,将其置于更大范围内。

Answer 5

事实是,纵向关系主要是为了明确表层人物的行为。虽然名称表明任何内容都应与中间内容一致,但只是没有。

http://phrogz.net/cs/vertical-align/index.html” rel=“nofollow”

Answer 6

使用<条码>在线-八:200px,例如

div {
  border:solid 1px black;
  height:200px; 
  line-height:200px;  
  width:200px;
}

另外,在您的榜样中,你赢得了t needvertical-align:middle。这意味着,<代码>div将纵向调整至括号>。这并不意味着案文将纵向统一。

Answer 7

This is way too much of a pain to do with a div. Use a table cell instead:
html: <table><tr><td>My Text</td></tr></table>
css: td { vertical-align: middle; }

友情链接