我试图找到如何垂直居中,但我找不到满意的答案.我发现的最佳答案是这个.这使它看起来像是允许我垂直居中文本,但如果我使用它并添加更多文本,它只会扩展到底部而不是重新居中,就像水平发生的那样.
注意,我正在寻找一个仅限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>
小智 10
嗯,有几个解决方案.
最简单的是
#centerme
{
// Will center the text vertically, but looks bad with multiliners
line-height: 20em;
}
对于多线程,您需要将a-box-in-a-box定位
#parentbox
{
// We need the "parent" to have some kind of height
height: 20em;
// The most important... position children "relative" to the parent
position:relative;
}
.childbox
{
position: absolute;
left: 0;
top: 50%;
margin-top: -5em; // This pulls the child back "up" to the vertical center
}
这里的问题是必须知道(或至少猜到)多层衬里的"高度",因此它实际上是垂直中心.
没有纯粹的CSS方法来了解元素的高度,这将允许我们以"自适应"方式垂直居中!
这意味着当您更改文本时,您还必须更改CSS以确保它仍然适合.
这可能很烦人,这就是大多数人使用JavaScript来解决这个"缺少功能"的CSS烦恼的地方和原因.最后,JavaScript使我们所有人都更容易(至少在这种情况下).
围绕网络和本网站进行了大量的问答.如果你错过了它们,这里有一些:
而且还有更多; 所有都为个案提供个性化解决方案.这些将帮助您获得更多信心(正如您最初声明的那样,您对这种CSS小提琴不熟悉).
您可以将容器设置为display:table-cell并添加vertical-align:middle:
http://jsfiddle.net/ptriek/h5j7B/1
(但Internet Explorer 7及以下版本不会喜欢这个...)
| 归档时间： |
|
| 查看次数： |
23626 次 |
| 最近记录： |