4

私は非常に単純なHTMLを持っています。いくつかの制限により、HTMLコンテンツを変更できません。CSSのみを使用してテキストを垂直方向に中央揃えにします。

<html>
    <head>...</head>

    <body>
        <div>Oops, the webpage is currently not available.</div>
    </body>
</html>

HTMLのサイズは可変である可能性があることに注意してください。

また、テキストを1行で表示できない場合は、複数行に分割する必要があります。

出来ますか？

4

5 に答える 5

4

vertical-alignは、テーブルにあるコンテンツに対してのみ機能すると思います。単純なページの場合、この問題を回避するために、コンテンツをdivではなくテーブルに配置できます。

いくつかの回避策があります。http：//phrogz.net/css/vertical-align/index.htmlを参照してください。

于 2010-05-31T11:41:05.680 に答える
3

別の可能な解決策：

<html>
    <head>
        <title>Title</title>
        <style>
            body {height:100%}
        </style>
    </head>

    <body>
        <div style="height:100%;">
            <div style="position:relative;top:50%;text-align:center">Oops, the webpage is currently not available.</div>
        </div>
    </body>
</html>
于 2010-05-31T11:48:21.260 に答える
2 
<html>
    <head>...
       <style type="text/css">
           div{
               width: 300px;
               height: 300px;
               border: solid blue;
               display: table-cell;
               vertical-align: middle;
           }
       </style>
    </head>

    <body>
        <div>This works fine!</div>
    </body>
</html>
于 2010-05-31T11:46:53.820 に答える
1 
<html>
    <head>
        <style type="text/css">
            .vertical {
                margin: 0;
                background: yellow;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%) 
            }
        </style>
    </head>
    <body>
        <div class="vertical">
         Centered
        </div>
    </body>
</html>
于 2014-09-09T18:56:25.903 に答える
-2

これを試して：

.text-tag{

    text-align: center;
    margin-top: 25%;
}

そして、中央揃えにしたいテキストに「テキストタグ」を適用します。

于 2013-11-02T01:42:01.883 に答える