如何使用CSS垂直居中文本？ [英] How do I center text vertically with CSS?
问题描述
我试图找到如何垂直居中文本，但我找不到满意的答案。至今我找到的最佳答案是这个。这使得它看起来像允许我垂直居中文本，但如果我使用它并添加更多文本，它只会扩展到底部，而不是被重新居中，就像水平发生的那样。
请注意，我正在寻找仅限CSS的解决方案，因此请勿使用JavaScript。请注意，我希望能够添加多行文本。
<？xml version =1.0encoding = 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/xhtmlxml：lang =enlang =en>
< head>
< style type =text / css>
div＃maindiv {
width：810px;
height：99px;
背景颜色：黑色;
margin：0px;
padding：0px;
颜色：白色;
font-family：Sans-serif;
text-align：center;
display：table;
}
div＃maindiv span {
font-size：1.1em;
}
div＃part1 {
width：270px;
height：99px;
背景颜色：＃6DCAF2;
float：left;
vertical-align：middle;
职位：亲属;
}
div＃horizon1 {
background-color：green;
height：1px;
剩下：0;
溢出：可见;
位置：绝对;
text-align：center;
top：50％;
可见性：可见;
宽度：100％;
}
div＃content1 {
background-color：green;
height：99px;
width：270px;
位置：绝对;
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：vertical-align不起作用：
<？xml version =1.0encoding =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/xhtmlxml：lang =enlang =en>
< head>
< style type =text / css>
div＃maindiv {
width：810px;
height：99px;
背景颜色：黑色;
margin：0px;
padding：0px;
颜色：白色;
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;
颜色：白色;
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！侦探对他的权力等级说了些什么？
< / span>
< / div>
< / div>
< div style =float：left;>
< div class =part bgc2>
< span>
它已经结束了NINE THOUSAAAAAAAAAND！
< / span>
< / div>
< / div>
< div style =float：left;>
< div class =part bgc3>
< span>
九千美元？没有办法可以做到！
< / span>
< / div>
< / div>
< / div>
< / body>
< / html>
您可以将容器设置为 display：table-cell 并添加 vertical-align：middle ：
< a href =http://jsfiddle.net/ptriek/h5j7B/1 =nofollow noreferrer> http://jsfiddle.net/ptriek/h5j7B/1
（但Internet Explorer 7及以下版本不会这样......）
I've tried to find how to center text vertically, but I can't find a satisfactory answer. The best answer I found until now is this. This makes it look like it allows me to center text vertically, but if I use this and I add more text, it is only extended to the bottom and not being re-centered, like what happens horizontally.
Note, I'm looking for a CSS-only solution, so no JavaScript please. Note, I want to be able to add multiple lines of text.
<?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>
In the end, I want to have three blocks, each of them centering the text in the middle. These texts are edited by clients so they have to be able to span over multiple lines. Currently the text starts at the top of the box and goes to the bottom, in the end, I want the text to start at a point so the centre of the body of the text is positioned at the center of the box.
My final solution,
Note: vertical-align does not work if you have float:left in the same div.
<?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>
You could set your container to display:table-cell and add vertical-align:middle:
http://jsfiddle.net/ptriek/h5j7B/1
(But Internet Explorer 7 and below won't like this...)
这篇关于如何使用CSS垂直居中文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
