Ask coding questions

← Back to all posts
Cant align the boxes to the center of the screen
MatthewMartin14 (0)

im trying to align name, password and there in put boxes to the center of the screen but iv tried so many things and none of them work help me?

Answered by notGilbert (121) [earned 5 cycles]
View Answer
Comments
hotnewtop
notGilbert (121)

Put a container div around the inputs, and add display: flex; justify-content: center to a parent container

HTML

<div id="form-container">
  <form>
    <label for="name">name</label>
    <input name="name">
  </form>
</div>

css

#form-container {
  display: flex;
  justify-content: center;
  /* add align-items: center if you want vertically */
  /* might need to width: 100% or height: 100% for it to center correctly */
}
MatthewMartin14 (0)

@notGilbert thanks but I like to learn as a go can you tell me what div does?

notGilbert (121)

@MatthewMartin14

A <div> is a wrapper element, it encloses multiple elements and makes it one.

1. groups an element and makes it one

This is useful for things like flexbox and layout.

ie: flex center the container, not the elements. Without the container, all the elements would be centered on their own basis (messy)

2. it allows you to select multiple elements without using commas (CSS)

/* selects everything inside the .container div */
.container * {
  color: red;
}
MatthewMartin14 (0)

@notGilbert thanks that really helped me out a lot