Assessment wanted for 'A Cool-looking Box'

Arittra · November 21, 2020, 4:43pm

Hello!

I’ve completed the skill test - A Cool-looking Box and would like to be assessed.
View my code from Glitch

I don’t quite get the “A reasonable height for a large button, centering the text vertically in the process.” thing. I just set a fitting height to the box and used padding to align the text to the center vertically.

louisono · November 22, 2020, 10:36am

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!