CSS Drop Cap help

  1. Why isn’t it centering in the middle of the page?
  2. How can I make the dropcap vertically longer? height doesn’t work
  3. How can I make this more visually pleasing?

it is centering in the middle of the page, but the padding on the dropcap is throwing it off. Instead, just give it a padding-right instead of all around.

height won’t work, you’re right. It’s an inline element. Use line-height instead.

As to how to make it more visually appealing, perhaps using a different font for this? Something from google fonts perhaps. Personally, I like https://fonts.google.com/specimen/Fredericka+the+Great – but it depends on your application.

When you say it isn’t centering in the middle of the page, do you mean vertically centering?

By default the parent container is as tall as the content within it. In order to center that content vertically on the page you have to specify that the parent container is the height of the viewport witth this in your css for that element:

height: 100vh;

Yes, vertically and horizontally in the middle of the page.

You already have it centering horizontally & ChrisCline1138’s solution will get it centering vertically.

1 Like