0

この問題に関するいくつかのスレッドを見つけましたが、すべて CSS3 より前のものでした。

現在、div 内でテキストを垂直方向に中央揃えにする方法はありますか? 4 つの div (投稿の下部にあるコード) を持つ単純な Web ページを作成しています。

基本的には、プレーンな div を jquery を使用して大きなボタンに変換し、クリックしたときにページの動作を変えることを計画しています。しかし、テキストが垂直方向の中央に配置されていないため、視覚的に見栄えが悪くなります。CSS3 と HTML を使用して、現在これを解決する信頼できる方法はありますか?

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jscript.js"></script>
<title>Title</title>
</head>

<body>

<div id="containerDiv">
<div id="topLeft">Some text</div>
<div id="topRight">some more text</div><br />
<div id="bottomLeft">south west text</div>
<div id="bottomRight">south east text</div>

</div>
</body>
</html>

CSSは次のとおりです

#containerDiv {
    background-color:#EEEEEE; 
    width:80%; 
    margin-left:auto; 
    margin-right:auto;
    }

#topLeft {
    float:left; 
    width:50%; 
    background-color:#8800AA; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center; 
    height:100px; 
    vertical-align:middle;
    }

#topRight {
    float:right; 
    width:50%; 
    background-color:#aa0088; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    vertical-align:middle;
    }

#bottomLeft {
    float:left; 
    width:50%; 
    background-color:#00aa88; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    vertical-align:middle;
    }

#bottomRight {
    float:right; 
    width:50%; 
    background-color:#0088aa; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    vertical-align:middle;
    }
4

4 に答える 4

1

トリックとしてline-height、div の高さがわかっている場合は、テキストを垂直方向に中央揃えするために使用できます。div と同じ高さに設定するだけで、垂直方向に中央揃えになります。

.some-div {
    height: 100px;
    line-height: 100px;
}
于 2013-09-13T06:34:58.397 に答える
0

実際にはそれほど素晴らしい方法ではありませんが... - div の line-height プロパティをその高さに設定できます。- または、div をテーブル セルとして表示し、垂直方向の配置プロパティを中央に設定して使用できます

于 2013-09-13T06:35:28.230 に答える
0

を使用したい場合は、 とvertical-align: middle;も使用する必要がありdisplay: table-cellますdisplay: table。これを行う別の方法はline-height、100px に設定することです。ただし、これは、テキストが 1 行しかない場合にのみ機能します (これらは意味のあるボタンでなければならないため)。

于 2013-09-13T06:35:40.857 に答える
0

これを試して

#containerDiv {
    background-color:#EEEEEE; 
    width:80%; 
    margin-left:auto; 
    margin-right:auto;
    }

#topLeft {
    float:left; 
    width:50%; 
    background-color:#8800AA; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center; 
    height:100px; 
    line-height:100px;
    }

#topRight {
    float:right; 
    width:50%; 
    background-color:#aa0088; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    line-height:100px;
    }

#bottomLeft {
    float:left; 
    width:50%; 
    background-color:#00aa88; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    line-height:100px;
    }

#bottomRight {
    float:right; 
    width:50%; 
    background-color:#0088aa; 
    color:#EFEFEF; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:10px; 
    text-align:center;
    height:100px;
    line-height:100px;
    }

デモ

于 2013-09-13T06:38:48.490 に答える