Question

我在这里找到了一些关于这个问题的线程，但都是在CSS3之前。

目前是否有办法在div中垂直居中？我正在创建一个包含4个div的简单网页（帖子底部的代码）。

本质上，计划是使用jquery将普通div转换为大按钮，并使页面在单击时表现不同。但在视觉上它现在看起来很差，因为文本没有垂直居中。使用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;
    }

Answer 1

作为一种技巧，如果您知道div的高度，可以使用line-height垂直居中文本。只需将其设置为与div相同的高度，它将垂直居中：

.some-div {
    height: 100px;
    line-height: 100px;
}

Answer 2

实际上并没有很好的方法，但...... - 您可以将div的line-height属性设置为其高度。 - 或者您将div显示为表格单元格，然后可以通过将其设置为中间

来使用vertical-align属性

Answer 3

如果您想使用vertical-align: middle;，则还应使用display: table-cell和display: table。另一种方法是将line-height设置为100px - 这只有在你只有一行文字时才有效（因为它们应该是有意义的按钮）。

Answer 4

试试这个

#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;
    }

Demo

在div中的CSS中的垂直中心文本

4 个答案: