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

Question

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

230 views Asked by Andrew At 25 December 2024 at 13:42

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>

Original Q&A

There are 2 answers

Adam Buchanan Smith On 09 June 2015 at 02:00

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.

**DRD** · Accepted Answer · 2015-06-09 02:00:27

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;
}

TechQA.

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

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in VERTICAL-ALIGNMENT

Popular Questions

Popular Tags

Trending Questions