参见英文答案 >
How to center an element horizontally and vertically?13个
我试图找到如何垂直居中文本,但我找不到满意的答案.我到目前为止找到的最佳答案是 this.这使它看起来像是允许我垂直居中文本,但如果我使用它并添加更多文本,它只会扩展到底部而不是重新居中,就像水平发生.
我试图找到如何垂直居中文本,但我找不到满意的答案.我到目前为止找到的最佳答案是 this.这使它看起来像是允许我垂直居中文本,但如果我使用它并添加更多文本,它只会扩展到底部而不是重新居中,就像水平发生.
注意,我正在寻找一个只有CSS的解决方案,所以请不要使用JavaScript.请注意,我希望能够添加多行文本.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div#maindiv {
width: 810px;
height: 99px;
background-color: black;
margin: 0px;
padding: 0px;
color: white;
font-family: Sans-serif;
text-align: center;
display: table;
}
div#maindiv span {
font-size: 1.1em;
}
div#part1 {
width: 270px;
height: 99px;
background-color: #6DCAF2;
float: left;
vertical-align: middle;
position: relative;
}
div#horizon1 {
background-color: green;
height: 1px;
left: 0;
overflow: visible;
position: absolute;
text-align: center;
top: 50%;
visibility: visible;
width: 100%;
}
div#content1 {
background-color: green;
height: 99px;
width: 270px;
position: absolute;
top: -50px;
}
</style>
<title>XHTML-Strict</title>
</head>
<div id="maindiv">
<body>
<div id="part1">
<div id="horizon1">
<div id="content1">
<div id="bodytext1">
<span>
Lorem ipsum dolor sit amet,consectetur adipiscing elit. Maecenas dolor augue,faucibus quis sagittis
<span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最后,我希望有三个块,每个块都将文本置于中间.这些文本由客户编辑,因此它们必须能够跨越多行.目前文本从框的顶部开始并且到底部,最后,我希望文本从一个点开始,因此文本正文的中心位于框的中心.
我的最终解决方案
注意：如果你有float：left在同一个div中,则vertical-align不起作用.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div#maindiv {
width: 810px;
height: 99px;
background-color: black;
margin: 0px;
padding: 0px;
color: white;
font-family: Sans-serif;
}
div#maindiv span {
font-size: 1.1em;
}
div.part {
width: 262px;
height: 99px;
padding: 0px;
margin: 0px;
padding: 4px;
border: 0px;
color: white;
text-align: center;
display: table-cell;
vertical-align: middle;
}
div.bgc1 {
background-color: #6DCAF2;
}
div.bgc2 {
background-color: #2A4B9A;
}
div.bgc3 {
background-color: #FF8A00;
}
</style>
<title>XHTML-Strict</title>
</head>
<div id="maindiv">
<body>
<div style="float: left;">
<div class="part bgc1">
<span>
Vegeta! What does the scouter say about his power level?!
</span>
</div>
</div>
<div style="float:left;">
<div class="part bgc2">
<span>
It's over NINE THOUSAAAAAAAAAND!
</span>
</div>
</div>
<div style="float:left;">
<div class="part bgc3">
<span>
What NINE THOUSAND? There is no way that can be right!
</span>
</div>
</div>
</div>
</body>
</html>
解决方法
您可以将容器设置为显示：table-cell并添加vertical-align：middle：
http://jsfiddle.net/ptriek/h5j7B/1
(但Internet Explorer 7及以下版本不会喜欢这个…)
