在< DIV>中垂直居中文本 [英] Center Text Vertically Within <DIV>
问题描述
我有一个具有固定高度的< div> 元素，我想在该元素内垂直居中一些文本。
I have a <div> element with a fixed height, and I'd like to center some text vertically within that element.
我一直尝试按照 http://phrogz.net/ css / vertical-align / index.html 。
我已经发布了我正在尝试的 http://jsfiddle.net/scwebgroup/74Rnq/ 。如果我把HeaderBrand的margin-top更改为大约-22px，它似乎是正确的。
I've posted what I'm trying at http://jsfiddle.net/scwebgroup/74Rnq/. If I change the HeaderBrand's margin-top to about -22px, it seems about right.
任何人都能看到为什么文章中描述的技术不能正常工作？
Can anyone see why the technique described in the article is not working as expected for me?
Note: The best answer here only works if the text doesn't wrap to a second line.
推荐答案
This：
<!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>
可在现代浏览器中使用，无论文本只跨越一行还是多行。
works in modern browsers, regardless of whether text spans only one or multiple lines.
还在 http://jsfiddle.net/74Rnq/135/ 更新了小提琴不知道你在做什么，当左边的625px边缘的东西本身只有150px的宽度...通过删除内联样式和使用一点padding也整理了一些。
Also updated the fiddle at http://jsfiddle.net/74Rnq/135/ Not sure what you were doing with a 625px margin on the left when the thing itself was only 150px in width… Tidied things up a bit by removing the inline styling and using a bit of padding as well.
这篇关于在< DIV>中垂直居中文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
