2

モバイルサイトをデザインしようとしています。ABCの真ん中を垂直に取得する必要があります。私は他のSOの質問に従って、スパンテキストを垂直方向に中央に取得する方法を登録しました。しかし、ここでは機能しません。私は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}
4

3 に答える 3

2

#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 を使用してテキストを垂直方向に中央揃えにする可能性はたくさんあり、それぞれに固有の欠点があることに注意してください。これは 1 つの可能性にすぎません。Google で「vertically center css」を検索した結果の一部を確認してください。ある種の独自の科学分野のようです。

于 2013-06-12T23:56:18.193 に答える
1

静的な高さと幅を設定する必要があるようです。それはうまくいくはずです。試してみてください）

    #screen-title{
            display: table-cell;
            height: 50px;
            width: 200px;
            text-align: center;
            vertical-align: middle;
于 2013-06-12T23:59:33.273 に答える
0

必要な効果を得るために X が適切な値である場所を追加line-height: Xpxします (通常、要素の高さと同じです)。

于 2013-06-12T23:48:33.993 に答える