CODEWITHSUNDEEP
htmlcssvertical-alignment
Andrew
Andrew

Reputation: 747

About the basis for calculation of line height property using percentages inside of a fixed height

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>

Upvotes: 1

Views: 228

Answers (2)

DRD
DRD

Reputation: 5813

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 declaration font: 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:

<div class="container">
    <h1 class="enormous">VOCÊ APRENDE</h1>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    padding: 10px;
}

h1.enormous {
    font: 2em/1 Sans-Serif;
    display: inline-block;
    vertical-align: bottom;
}
.container {
    background-color:red;
    width: 300px;
    height: 125px;
    line-height: 125px;
}

Upvotes: 4

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

h1.enormous{font-size: 2em; line-height: 20px; padding-top: 30%;}
.container{background-color:red; width: 300px; height: 125px;}

That should do it for ya.

Upvotes: 1

Related Questions