1

SOで多くの回答を確認しましたが、最も一般的な解決策はdisplay、divをtable-cellまたはとして設定することでしinline-blockたvertical-align: middle

したがって、以下は私の HTML コードです。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/ad.css" />
        <title>Ad</title>
    </head>
    <body>
        <div id="initial-div">
            Check out our amazing offer
        </div>
    </body>
</html>

CSSコードは以下の通り

body {
    overflow:hidden;
    height:100%;
    min-height: 100%;
    width: 100%;
    color: #ffffff;
    background-color:aliceblue;
}

#initial-div{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    color: #000;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background-color: #ffd800;
}

しかし、テキストは垂直方向の中央に配置されていないようです。ここでどこが間違っていますか？

4

1 に答える 1

0

これはうまくいきます：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/ad.css" />
        <title>Ad</title>
    </head>
    <body>
        <div id="initial-div">
            <div>Check out our amazing offer</div>
        </div>
    </body>
</html>


body {
    overflow:hidden;
    height:100%;
    min-height: 100%;
    width: 100%;
    color: #ffffff;
    background-color:aliceblue;
}

#initial-div{
    position:fixed;
    height: 100%;
    color: #000;
    background-color: #ffd800;
    width: 100%;
}
#initial-div div{
    text-align: center;
    position: relative;
    top: 50%;
    margin-top: -5px; /* height/2 */
}

http://jsfiddle.net/zpFym/

于 2013-06-20T05:14:50.690 に答える