文本对齐：居中，带包装，输入框和按钮不居中，但徽标居中正常答案

【问题标题】：Text-align: center, with wrapper, Input Boxes & Button not centering themselves but logo centers fine文本对齐：居中，带包装，输入框和按钮不居中，但徽标居中正常
【发布时间】：2018-05-24 13:18:01
【问题描述】：

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

如果我注释掉 searchArea div 以便按钮和框仅被包装器包围，那么一切都很好，但由于 width 属性而被拉伸。

如何让searchArea div 中的所有内容在徽标下方居中而不丢失searchArea 类的设置样式？？？

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%;
}

【问题讨论】：

标签： html css center text-align

【解决方案1】：

为了使 block-level elements 像 <div> 一样水平居中，您需要应用 margin-left 和 marign-right strong> 属性，都具有 auto 值。

通常您可以使用简写 margin: 0 auto，但考虑到您的 margin-top 是 0.8%，您需要为您的 @987654334 手动指定两者@选择器。

这可以在下面看到：

.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>

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

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

.searchArea {
    margin: 0.8% auto 0;
}

祝你好运！）

【讨论】：