text-align:center对input标签不生效的问题及解决验证

当你给.main容器加text-align:center时，img和button能正常居中，是因为它们默认的display类型是inline-block——这类行内块元素会继承父容器的text-align属性，自然实现水平居中。

但你给.search-input设置了display:block，把它变成了块级元素：

• text-align:center是管元素内部行内/行内块元素对齐的，没法让块级元素自己在父容器里居中
• 而margin:0 auto是块级元素水平居中的标准操作：只要块级元素有明确的宽度（或max-width），左右margin设为auto就会让浏览器自动分配两侧空白，把元素怼到父容器的水平中心。

修正后的CSS代码 #

.main {
  margin-top: 100px;
  text-align: center;
}

.logo-img {
  /* display: block; */
  width: 300px;
  margin-bottom: 20px;
  /* margin-left: auto;
    margin-right: auto; */
}

.search-input {
  display: block;
  max-width: 400px;
  margin: 0 auto; /* 新增这行实现块级input居中 */
  line-height: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
}

.btn {
  margin-top: 30px;
  background: #dfe1e5;
  border: none;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 4px;
  font-size: 14px;
}

对应的HTML代码 #

<html>

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="main">
    <img class="logo-img" src="https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80" />
    <input class="search-input" type="text" />
    <button class="btn">Google Search</button>
    <button class="btn">I'm Feeling Lucky</button>
  </div>
</body>

</html>

额外提一句：要是你不想把input改成block，也可以删掉display:block，让它保持默认的inline-block类型，这时候父容器的text-align:center也能让它居中。不过这种情况下input的宽度会跟着内容变，如果你需要固定或最大宽度，还是用block+margin:auto的方式更可控。

内容的提问来源于stack exchange，提问作者arap