文本对齐：居中，带有包装器、输入框和按钮本身不居中，但徽标居中很好

Question

在这个页面上，我有一个徽标（图像文件，具有设置的高度以更好地适应），它在自己的 div 中很好地居中。此徽标包裹在 div 和 text-align: center 的包装纸中，并且居中。还有 2 个带有搜索按钮的文本输入框，与徽标的 div 分开包装，它们也被包装在包装器 div 中，但是当我加载页面时 div出现在页面左侧。

如果我注释掉 searchArea div，这样按钮和框仅被包装器包围，一切都很好地居中，但由于宽度属性而被拉长。

如何在不丢失 searchArea class 的设置样式的情况下使 searchArea div 中的所有内容都居中放置？？？

HTML:

<div id="logo" class="centerWrapper">
    <img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo">
</div>

<div id="search" class="centerWrapper">
    <div id="searchArea" class="searchArea">
        <input type="text" class="inputBox" name="charName" placeholder="Character Name"><br>
        <input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br>
        <button type="button" class="searchButton">Search</button>
    </div>
</div>

CSS:

.centerWrapper {
    text-align: center;
}
.logo {
    height: 46px;
}
.searchArea{
    margin-top: 0.8%;
    height: 125px;
    width: 340px;
}
input.inputBox {
    background-color: #0B122F;
    border-color: #877055;
    color: #4A4E5A;
    margin: 5px 0px;
    padding: 5px 10px 5px 10px;
    width: 72%;
}

Answer 1

为了使 block-level elements like <div>, you're looking to the apply the margin-left and marign-right 属性水平居中，两者都具有 auto 值。

通常您可以使用 0.8% 的 shorthand margin: 0 auto, but considering you have a margin-top，您需要为您的 .searchArea 手动指定两者选择器。

这可以在下面看到：

.centerWrapper {
  text-align: center;
}

.logo {
  height: 46px;
}

.searchArea {
  margin-top: 0.8%;
  height: 125px;
  width: 340px;
  margin-left: auto;
  margin-right: auto;
}

input.inputBox {
  background-color: #0B122F;
  border-color: #877055;
  color: #4A4E5A;
  margin: 5px 0px;
  padding: 5px 10px 5px 10px;
  width: 72%;
}

<div id="logo" class="centerWrapper">
  <img id="logo" class="logo" src="img/TestAPICropped.png" alt="logo">
</div>

<div id="search" class="centerWrapper">
  <div id="searchArea" class="searchArea">
    <input type="text" class="inputBox" name="charName" placeholder="Character Name"><br>
    <input type="text" class="inputBox" name="realmName" placeholder="Realm Name"><br>
    <button type="button" class="searchButton">Search</button>
  </div>
</div>

希望对您有所帮助！ :)

Answer 2

要使块元素水平居中，您必须使用 margin: 0 auto; 但是有margin-top: 0.8%；所以你可以一起使用它：

.searchArea {
    margin: 0.8% auto 0;
}

祝你好运！）

文本对齐：居中，带有包装器、输入框和按钮本身不居中，但徽标居中很好

Text-align: center, with wrapper, Input Boxes & Button not centering themselves but logo centers fine

html

css

text-align

center