I'm experimenting with using line-height to vertically align text inside of containing div. I find it strange that to do so using a percentage requires the use of (comparatively) astronomically large values. As you can see in this fiddle, I used 700% to push the text all the way down to the bottom margin of the containing div!
Any explanations? I'm curious to know what basis is used to calculate this percentage. Is there any danger that using something like this will break my page?
<!DOCTYPE html>
<html>
<head>
<style>
h1.enormous{
line-height: 700%;
font-size: 2em;
}
</style>
</head>
<body>
<div style="background-color:red; width: 300px; height: 125px;">
<h1 class="enormous">VOCÊ APRENDE</h1>
</div>
</body>
</html>
line-height
as a percentage (e.g.,700%
) or a constant (e.g.,7
) is calculated on the basis of the font-size. Thus, the following declarationfont: 12px/2 Sans-Serif
will make text size 12 pixels in a line that is 24 pixels (2 * 12).For your example, to place the text at the bottom of the container, using
line-height
property, you can do the following: http://jsfiddle.net/07r139tz/.HTML:
CSS: