css flex box 将文本中心与其下方的按钮对齐

Question

我正在尝试将这个框和它下面的两个按钮直接对齐在页面的中心[水平和垂直]。每当我让文本框居中对齐时，按钮似乎总是卡在一边。我认为这是我尝试将 CSS 用于正文然后移动文本和按钮的方式。按钮需要在文本框下方并排放置[所有内容都直接在页面中心对齐]。

这是我目前所拥有的：

.calc {
    display: inline-block;
    /* align-items: center; */
    padding-top: 200px;
    padding-left: 20px;
    /* display: flex; */
}
.search_btn {
    align-items: center;
    width: 200px;
    margin: 0 auto;
    /* display: flex; */
    display: inline-block;
}

.search_txt {
    width: 300px;
    margin: 0 auto;
    display: block;
    /* display: flex; */
    /* flex-direction: column; */
    border-radius: 25px;
}

<form class="calc" action="https://calculator.com">
    <input class="search_txt" type="text" name="q">
    <input class="search_btn" type="submit" value="value">
    <input class="search_btn" type="submit" value="area">
    <!-- <input class="search_btn" type="submit" value="perimeter"> -->
</form>

Answer 1

我认为您需要将两个按钮都包装在一个容器 div 中，并让该容器具有display:flex。此外，您的主要形式也需要为display:flex，但其方向为flex-direction:column。然后要居中，您可以使用align-items:center; justify-content:center

.form-buttons {
  display: flex;
  gap: 10px;
}

.calc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.search_btn {
  width: 200px;
}

.search_txt {
  width: 300px;
  border-radius: 25px;
}

<form class="calc" action="https://calculator.com">
  <input class="search_txt" type="text" name="q">
  <div class="form-buttons">
    <input class="search_btn" type="submit" value="value">
    <input class="search_btn" type="submit" value="area">
  </div>
  <!-- <input class="search_btn" type="submit" value="perimeter"> -->
</form>

Answer 2

@凯蒂·梅洛斯托。我认为处理 flex box 最重要的是知道在哪里应用 flex 来对齐项目，即父元素或子元素本身。 flex css的详细信息可以查看这个url。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
我已经更改了您的部分代码。 检查此网址以了解我的 chage。
"https://codepen.io/devbluesky111/pen/oNZxBYW"

body {
  display: flex;
  justify-content: center;
} 
.calc {
   display: inline-block;
   /* align-items: center; */
   padding-top: 200px;
   padding-left: 20px;
   display: flex-column;
}
.search_btn {
  align-items: center;
  width: 150px;
  margin: 0 auto;
  /* display: flex; */
  display: block;
}

.search_txt {
  width: 300px;
  margin: 0 auto;
  display: block;
  border-radius: 25px;
  margin-bottom: 10px;
}
.buttons {
  display: flex;
/*   flex-direction: column; */
}

<form class="calc" action="https://calculator.com">
  <input class="search_txt" type="text" name="q">
  <div class="buttons">
    <input class="search_btn" type="submit" value="value">
    <input class="search_btn" type="submit" value="area">
  </div>
</form>

Answer 3

根据分配的元素中的项目数量灵活对齐项目。所以要做你想做的事，你应该把你的按钮包装在一个 div 中，然后将容器设置为 flex with column。这会将输入和按钮放在一列中。现在将按钮的容器设置为 flex row。

.calc {
    display: inline-block;
    /* align-items: center; */
    padding-top: 200px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}
#btnContainer {
  display: flex;
}
.search_btn {
    align-items: center;
    width: 200px;
    margin: 0 auto;
}
.search_txt {
    width: 300px;
    margin: 0 auto;
    border-radius: 25px;
}

<form class="calc" action="https://calculator.com">
    <input class="search_txt" type="text" name="q">
  <div id="btnContainer">
    <input class="search_btn" type="submit" value="value">
    <input class="search_btn" type="submit" value="area">
  </div>
    <!-- <input class="search_btn" type="submit" value="perimeter"> -->
</form>

Answer 4

您可以使用display:gird; 和place-items:center; 将内容居中对齐

body {
display:grid;
place-items:center;
}
.calc {
    display: inline-block;
    /* align-items: center; */
    padding-top: 200px;
    padding-left: 20px;
    /* display: flex; */
}
.search_btn {
    align-items: center;
    width: 200px;
    margin: 0 auto;
    /* display: flex; */
    display: inline-block;
}

.search_txt {
    width: 300px;
    margin: 0 auto;
    display: block;
    /* display: flex; */
    /* flex-direction: column; */
    border-radius: 25px;
}

<form class="calc" action="https://calculator.com">
    <input class="search_txt" type="text" name="q">
    <input class="search_btn" type="submit" value="value">
    <input class="search_btn" type="submit" value="area">
    <!-- <input class="search_btn" type="submit" value="perimeter"> -->
</form>