How to get a div below another div while centering both horizontally

Question

Im trying to center the div "input" below the div "InputBelow" by using "flex-direction: column". However when I try to use it, it breaks the "justify-content; center".

I want to both center the main div "border" in the middle of the screen, while aligning the other 2 elements inside of it.

.border {
  height: 300px;
  width: 700px;
  margin: auto;
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  border: 3px solid;
  border-radius: 45px;
  border-color: black;
  display: flex;
  justify-content: center;
  flex-direction: column;
  /* If I remove this, justify content works fine. If I add it, justify-content just stops working */
}

.calcText {
  color: black;
  font-size: 44px;
  margin: 35px;
}

.value {
  height: 10px;
  width: 50px;
}

<div class="border">
  <div class="calcText">Input Below</div>
  <input class="value" type="text">
</div>

`align-items: center;`, when you have `flex-direction: column`, you should updates `justify-content` and `align-items`. — Amaury Hanser, Nov 10 '22 at 13:02
But this centers my text vertically, I want to place it at the top of the border — DevaWay, Nov 10 '22 at 13:04
uh... I thought alight was for vertical and justify for horizontal... but removing justify did the trick, thanks — DevaWay, Nov 10 '22 at 13:07

score 0 · Answer 1 · answered Nov 10 '22 at 13:11

0

Thanks to Amaury for the solution. For some reason I thought aling-items was for vertical alignment and justify-content for horizontal alignment. Turns out I had to remove justify content.

answered Nov 10 '22 at 13:11

DevaWay

1
2

*"The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container."* source: [MDN justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) – Amaury Hanser Nov 10 '22 at 13:26
*"The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)."* source [MDN flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction), so when you use `flex-direction: column`, you are changing the main axis, `justify-content` isn't about horizontal distribution anymore – Amaury Hanser Nov 10 '22 at 13:27

How to get a div below another div while centering both horizontally

1 Answers1