How do I make my text vertically centered when height increases?

Question

my html file:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Using Web Font</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p class="paragraph">Making the Web Beautiful!</p>
</body>

</html>

my css file:

html,
body {
  font-size: 40px;
  text-align: center;
  padding-top: 3.5em;
}

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v15/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BAyo3Sup8.woff2) format('woff2');
}

.paragraph {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  border-width: thick;
  border-style: dashed solid;
  border-color: red rgba(170, 50, 220, .6) green;
  display: inline-block;
  width: 9em;
  margin:0 auto;
  height: 10em;
  vertical-align: middle;
}

Result: Result

As the height of .paragraph increases, the text won't change its position to be vertically centered again. Is there a way to make the text vertically centered as the height changes? I'm new to coding so I am really not sure...

It would be great if I can get some help! Thanks

Amarender Reddy · Accepted Answer · 2020-10-16T14:54:15.140

Use flexbox to make your job easy. Just add display: flex; align-items: center;

html,
body {
  font-size: 40px;
  text-align: center;
  padding-top: 3.5em;
}

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v15/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BAyo3Sup8.woff2) format('woff2');
}

.paragraph {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  border-width: thick;
  border-style: dashed solid;
  border-color: red rgba(170, 50, 220, .6) green;
  width: 9em;
  margin:0 auto;
  height: 10em;
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Using Web Font</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p class="paragraph">Making the Web Beautiful!</p>
</body>

</html>

Thank you, it worked! Just one question, you know how you didn't get rid of "display: inline-block;" and just wrote "display: flex;" down the lines. Does the inline-block value get overwritten by the "display: flex;" as that's the last display value defined within my code? Please let me know, thanks for the answer! — , Oct 16 '20 at 04:16
sorry about that. I removed unwanted code. And Yes, in CSS if same property specified after the first property, it will be overridden by the latest one. — Amarender Reddy, Oct 16 '20 at 14:56

score -1 · Answer 2 · edited Oct 12 '20 at 06:21

-1

Since this is a p tag you can add use padding-top 50% in CSS to align it vertically.

Include the following in your CSS.

.paragraph {padding-top: 50%}

edited Oct 12 '20 at 06:21

mhrabiee

805
10
23

answered Oct 11 '20 at 03:03

huzzzus

172
10

Hmmm this seems to make the text go nearer to the center, but not actually centered. I think something to do with my padding values ain't adding up properly to be able to have padding-top: 50% be applied properly. – Oct 16 '20 at 04:14

score -1 · Answer 3 · answered Oct 11 '20 at 03:03

You can use grid here.

html,
body {
  font-size: 40px;
  text-align: center;
  padding-top: 3.5em;
}

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v15/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BAyo3Sup8.woff2) format('woff2');
}

.paragraph {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  border-width: thick;
  border-style: dashed solid;
  border-color: red rgba(170, 50, 220, .6) green;
  display: inline-block;
  width: 9em;
  margin:0 auto;
  height: 10em;
  display: grid;
  align-items: center;
  
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Using Web Font</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p class="paragraph">Making the Web Beautiful!</p>
</body>

</html>

Thank you for the answer! This also seems to work just like when display: flex;. I feel like I have seen people use flexbox for this type of problem more though (altho being a newbie, not 100% sure) and it makes more sense since I am not looking to make a grid? But it still works tho, thank you for the answer! — , Oct 16 '20 at 04:17

How do I make my text vertically centered when height increases?

3 Answers3