mdn/ai-feedback

[AI Help] Question: i want do a page with just a backgroud color and a h1 element in the middle of the page, vertically and horizontally but i just manage to center it horizontally

Opened this issue · 0 comments

DianaRCruz commented

What is the issue with the answer?

The text dont appear centered nor vertically nor horizontally

How would you categorize this issue?

  • The answer is harmful / unsafe.
  • The answer is not correct.
  • The answer is not helpful.
  • The answer is outdated.

What did you ask?

  1. i want do a page with just a backgroud color and a h1 element in the middle of the page, vertically and horizontally but i just manage to center it horizontally

What did AI Help answer?

To center an element both vertically and horizontally on a page, you can use flexbox. Here's how you can achieve this:

  1. Set the body and HTML elements to take up the full height of the viewport.
  2. Use flexbox to center the content both vertically and horizontally.

Here's the HTML and CSS code you can use:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Hello, World!</h1>
  </div>
</body>
</html>

CSS (styles.css):

body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  text-align: center;
}

h1 {
  background-color: lightblue;
  padding: 20px;
}

In this code:

  • The body and html elements are set to height: 100% to take up the full height of the viewport.
  • display: flex on the body and html elements creates a flex container.
  • justify-content: center and align-items: center center the content both horizontally and vertically within the flex container.
  • The h1 element is placed inside a div with the class container for styling purposes.
  • The h1 element has a light blue background color and padding for better visibility.

This setup should center the h1 element both vertically and horizontally on the page. Feel free to adjust the styles to fit your design preferences.

What MDN pages did AI Help consult?