文本在<DIV>中垂直居中
文本在<DIV>中垂直居中
提问于 2011-10-01 07:13:14
我有一个具有固定高度的<div>元素，我希望在该元素中将一些文本垂直居中。
我一直在尝试遵循http://phrogz.net/css/vertical-align/index.html上的说明。然而，它似乎对我不起作用。
我已经在http://jsfiddle.net/scwebgroup/74Rnq/上发布了我正在尝试的内容。如果我将HeaderBrand的顶部边距更改为大约-22px，它似乎是正确的。
有没有人知道为什么这篇文章中描述的技术不能像我期望的那样工作？
注意:只有当文本不换行到第二行时，最佳答案here才有效。
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-10-04 06:03:58
这一点：
<!DOCTYPE html>
<style>
.outer { outline: 1px solid #eee; }
.outer > p { display: table-cell; height: 200px; vertical-align: middle; }
</style>
<div class="outer">
<p>This text will be vertically aligned</p>
</div>
<div class="outer">
<p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>
</div>适用于现代浏览器，无论文本是只跨一行还是跨多行。
我还更新了http://jsfiddle.net/74Rnq/135/上的小提琴，不知道当…宽度只有150px时，你在用625px的左边距做什么通过删除内联样式和使用一些填充来整理一些东西。
Stack Overflow用户
发布于 2011-10-01 07:21:35
您可以尝试将line-height设置为div的高度，如下所示：
<div style="height:200px;border:1px solid #000;">
<span style="line-height:200px;">Hello world!</span>
</div> 这是另一种似乎有效的技术：
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
}
<div style="position:relative;height:200px;">
<div id="vertical">
Hello world!
</div>
</div>Stack Overflow用户
发布于 2016-10-27 13:56:59
如下所示，您可以轻松地将文本元素的父元素设置为position: relative，并将文本元素本身设置为position: absolute；然后使用方向属性在父元素中移动文本。请看下面的例子。
<!--Good and responsive ways to center text vertically inside block elements-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centered Text®</title>
<style type="text/css">
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica;
}
#wrapper {
width: 100%;
height: auto;
}
#wrapper > div {
margin: 40px auto;
overflow: hidden;
position: relative;
height: 100px;
width: 50%;
}
p {
position: absolute;
word-wrap: break-word;
text-align: center;
color: white;
background-color: rgba(0,0,0,0.5);
}
#parent1 {
background-color: orange;
}
#parent1 p {
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
height: auto;
width: auto;
padding-top: 30px; /* Parent1's height * 0.5 = parent1 p's padding-top (Adjust to make look more centered) */
}
#parent2 {
background-color: skyblue;
}
#parent2 p {
left: 50%;
top: 50%;
padding: 10px;
transform: translate(-50%, -50%);
}
#parent3 {
background-color: hotpink;
}
#parent3 p {
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="parent1">
<p>Center Method 1</p>
</div>
<div id="parent2">
<p>Center Method 2</p>
</div>
<div id="parent3">
<p>Center Method 3</p>
</div>
</div>
</body>
</html>我希望这能帮到你!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7616969
复制相关文章
相似问题