0

我在这里找到了一些关于这个问题的线程，但都是 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;
    }
4

4 回答 4

1

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

.some-div {
    height: 100px;
    line-height: 100px;
}
于 2013-09-13T06:34:58.397 回答
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 回答
0

这实际上并不是很好的方法，但是... - 您可以将 div 的 line-height 属性设置为它的高度。- 或者您将您的 div 显示为表格单元格，然后可以通过将其设置为中间来使用垂直对齐属性

于 2013-09-13T06:35:28.230 回答
0

如果你想使用vertical-align: middle;than 你也应该使用display: table-celland display: table。另一种方法是设置line-height为 100px - 这仅在您只有 1 行文本时才有效（因为这些应该是有意义的按钮）。

于 2013-09-13T06:35:40.857 回答