0

Centering horizontally was no problem but I am having trouble vertically. I want the two sentences to be in the middle of the page, no matter what size device is being used. I tried vertical-align with no success. I tried position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); and ended up with them overlapping which makes sense but I can't figure out how to get around it.

<!DOCTYPE html>
<html>
<head>
<title>Jefferson's Virginia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body  {
  background-color:#999;
}
P.one {
    margin-left: auto;
    margin-right: auto;
    max-width: 50%
    font-family: "Times New Roman", Times, serif; 
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
    }
P.two {
    margin-left: auto;
    margin-right:auto;
    max-width: 50%
    font-family: "Times New Roman", Times, serif; 
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
    }
    </style>
    </head>
<body>
<p class="one"> Jefferson's Virginia Website </p>
<br>
<p class="two"> In Process of Being Re-constructed </p>
</body>
</html>
Raju Ahmed
  • 1,282
  • 5
  • 15
  • 24
Cor
  • 5
  • 3

1 Answers1

0

1) wrap all element in a wrapper HTML element

<div class="wrapper"> ... </div>

2) make height of body and html as 100%

html, body{
    height: 100%;
}

3) Center the whole wrapper element using flexbox.

.wrapper{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


html,
body {
  height: 100%;
}

body {
  background-color: #999;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-align: center;
}

p.one {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.75em;
  font-weight: bold;
}

p.two {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.75em;
  font-weight: bold;
}
<div class="wrapper">
  <p class="one"> Jefferson's Virginia Website </p>
  <br>
  <p class="two"> In Process of Being Re-constructed </p>
</div>
DecPK
  • 24,537
  • 6
  • 26
  • 42
  • This works perfectly on my desktop, thanks. However, on my phone the p.two isn't aligned in the center unless I rotate it to portrait. – Cor Nov 10 '21 at 04:45
  • In that case, you can use `text-align: center;` on `.wrapper` and It work perfectly. Edited answer. Have a look – DecPK Nov 10 '21 at 06:56