Menu
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.
915
Answer: Use the CSS line-height property Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px .
Vertically centering div items inside another div Just set the container to display:table and then the inner items to display:table-cell . Set a height on the container, and then set vertical-align:middle on the inner items.
Answer: Use the align-items-center Class In Bootstrap 4, if you want to vertically align a <div> element in the center or middle, you can simply apply the class align-items-center on the containing element.
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.
145
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
