Center Text Vertically Within <DIV>

 

I have a <div> element with a fixed height, and I'd like to center some text vertically within that element.

I've been trying to follow the instructions at http://phrogz.net/css/vertical-align/index.html. However, it doesn't seem to work for me.

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.

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.

You can try setting the line-height to the height of the div, like this: 

<div style="height:200px;border:1px solid #000;"> 
    <span style="line-height:200px;">Hello world!</span> 
</div>

Here's another technique that seems to work: 

#vertical{
    position:absolute;
    top:50%;    
    left:0;
    width:100%;
}

<div style="position:relative;height:200px;">
    <div id="vertical">
        Hello world!
    </div>              
</div>

I know this method adds some HTML, but it seems to work in all major browsers (even IE7+).

Basic HTML Structure 

<div id="hold">
  <div>Content</div>
  <div class="aligner">&nbsp;</div>
</div>​

Require CSS 

#hold{
    height:400px;
}
div{
    display:        -moz-inline-stack;
    display:        inline-block;
    zoom:            1;
    *display:        inline;
    vertical-align:middle;
}
.aligner{
    width:0px;
    height:100%;
    overflow:hidden;
}​

The jsFiddle

链接地址: http://www.djcxy.com/p/41646.html

上一篇: 如何垂直和水平居中页面中的P文本

下一篇: 在<DIV>中垂直居中文本