Hello @Arittra, once again good job on the test
Centering things vertically using CSS is not as easy as centering them horizontally, unfortunately There are two ways to center this text that come to my mind.
Don’t set any height
for that element, just set the padding
for the top and the bottom of the element, for instance:
p {
width: 200px;
padding: 1em 0;
/* the rest of your css code doesn't specify any value
for the height of the element */
}
This has two effects:
- Your text is gonna take as much space as it needs to do
- CSS is gonna put extra space (the
padding
) above and below your text thus vertically centering it.
You can also use the line-height
property. A sensible thing to do would be:
- to set a
line-height
by using an em
value, that way you’re sure your text is gonna have enough vertical space
- to set the
height
of the whole <p1>
element as the value as the line-height
p1 {
width: 200px;
line-height: 1.5em;
height: 1.5em;
}
If you do this, the height
of the whole <p1>
element is gonna be the same as the line-height
resulting in a unique, vertically centered line of text. The downside of this method, is that it doesn’t work that well for a multi-line text. Try changing the paragraph element to:
<p1>This is a cool box. But it has a long text.
I mean a really loooong text, trust me.</p1>
And see what happens
I think that wraps it up.
Have a lovely day!