CODEWITHSUNDEEP
csshtml
user3185047
user3185047

Reputation:

Line-height with alignment inside;

It seems my issue was never asked - or probably I'm not smart enough to find it:

Is there a way to align vertically a element inside its line-height through CSS?

Example and Code

Link to the example image: https://www.dropbox.com/s/92lia6rdl9nyanq/Example.png

HTML

<article class="news-content news-content-1">
    <h1 class="news-title">
         Hello World!
    </h1>
</article>

CSS

.news-content.news-content-1 news-title 
{ 
    line-height: 1.5;
}

I'll specify a little more: I want it to act as a vertically aligned element (center) inside the the ARTICLE, and I need the LINE-HEIGHT set to 1.5 but this extra height is set below the element and I need it to be centered in it.

I will appreciate any help.

EDIT:

The image shows 'line-height: 1.5px;' but it is actually only 'line-height: 1.5', sorry.

Upvotes: 0

Views: 49

Answers (1)

knrz
knrz

Reputation: 1811

What you're seeing with the inspector isn't the line-height, but rather the padding. Check this fiddle out.

I've set the margin and the padding of the h1 to 0, and the line-height to 1.5. Try changing the line height and seeing the difference.

Text is always vertically centered within its line height.

Upvotes: 1

Related Questions