Line-height and dynamic height of div

Question

I am wondering how can I set line-height to be always equal to height of the container div - in order to center the element inside of the container in the middle of the height of the container.

Lets say I have a following:

<div style="height:12%">
<i style="line-height:??"></i>
</div>

How can I set line height, so that it changes with the changes when the height of the container div changes?

Thanks
uksz

It's not really clear what you are trying to acheive here. Could you give a little more information? line-height is always relative to the font as this is most of the time what is needed. Are you trying to center it? — Daniel Casserly, Jan 25 '16 at 09:20
@DanielCasserly, yes, thats exactly what I am trying to do. Editing post in a moment. — uksz, Jan 25 '16 at 09:24
@uksz - being that you're trying to vertically center here - you could try one of the methods for centering within a div with dynamic height in my answer [here](http://stackoverflow.com/a/33362841/703717) — Danield, Jan 25 '16 at 09:49

Alohci · Answer 1 · 2016-01-25T12:36:34.157

You put another inline-level element on the same line with a height equal to 100% of the container. It's most common to use display:inline-block; here, but any inline-level element to which height applies, such as inline-table, inline-flex or a replaced inline element will work just as well.

e.g div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }

html, body { height: 900px; }

div { border:1px solid black; height: 12%; }

div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }

<div>
<i>My text</i>
</div>

score -1 · Answer 2 · answered Jan 25 '16 at 09:18

The intuitive way would be to set the line-height to 100%, but that actually just sets the line height to 100% size of the font

Assuming you probably want to center your text, try this

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

Line-height and dynamic height of div

2 Answers2