javascript - 跨度中间对齐不起作用

Question

我正在尝试设计一个移动网站。需要垂直让 ABC 居中。我关注了其他 SO 问题 reg 如何在中间垂直获取 SPAN 文本。但在这里它不起作用。我已经包括了jsfiddle。http://jsfiddle.net/3tdYT/ 我不确定我错过了什么。

<div id="main">
        <div id="header">
            <div id="logo"><img src="http://placehold.it/72x38"></div>
            <div id="menu">a</div>
            <div id="title-wrapper"><div id="title"><span id="screen-title">ABC</span></div></div>

        </div>
        <div id="company-name">CCCCCC</div>     
    </div>



 * {    margin:0; padding:0}

#header{
    height:53px;
    padding:0;
}
        #logo{  
            float:left; 
            background: #ffffff;
            padding:5px;
        }
        #title{
            text-align:center;
            height:100%;                
            margin:0 auto;

        }
        #title-wrapper{

            height:100%;
            background: #ff3eae;
        }
        #screen-title{
            vertical-align: middle;
            display: inline-block;

        }
        #menu{
            width:20%;
            height:100%;
            float:right;
            padding:0;
            background: #E23222;
        }
#company-name{
    width:100%;
    float:left;
    background: darkblue;
    clear:left;
    padding:0px;
    color: #ffffff;
    text-align: center;
}
#main {width:240px}

Answer 1

将#title' 显示变成 atable和#screen-title' 显示变成 a table-cell：

/* ... */

    #title{
        display: table;
        height:100%;
        margin:0 auto;
    }

/* ... */

    #screen-title{
        vertical-align: middle;
        display: table-cell;
        text-align: center;
    }

http://jsfiddle.net/XMcCR/3/

但请注意，使用 css 垂直居中某些文本有很多可能性，每种都有其特定的缺点。这只是一种可能性。只需检查快速谷歌搜索“垂直居中 css”的一些结果。它几乎似乎是某种自己的科学领域。

Answer 2

看来您必须为其设置静态高度和宽度。那应该行得通。试试）

    #screen-title{
            display: table-cell;
            height: 50px;
            width: 200px;
            text-align: center;
            vertical-align: middle;

Answer 3

添加line-height: Xpxwhere X 是一个合适的值以获得您想要的效果（通常与元素的高度相同）