Question

我正在尝试设计一个移动网站。需要垂直获得ABC中间。我跟着其他SO问题注册如何在中间垂直获得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的显示变为table和#screen-title的显示为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垂直居中某些文本有很多可能性，每种文本都有其特定的缺点。这只是一种可能性。只需查看Google快速搜索“垂直中心css”的部分结果即可。它几乎似乎是某种自己的科学领域。

Answer 2

您似乎必须为其设置静态高度和宽度。这应该工作。试一试）

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

Answer 3

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

跨度中间对齐不起作用

3 个答案: