网页登录模块输入框无法居中对齐的问题求助

问题描述 #

我正在做网站的登录模块，想把所有元素都居中显示。目前标题、提示文字这些内容都成功居中了，但输入框怎么都没法跟着居中，折腾了好一会儿还是没搞定。下面是我的代码：

<head>
  <title>Login - Wearthux</title>
</head>
<body style="background-color:gray">
  <h1 style="text-align:center">Login to Wearthux</h1>
  <br>
  <h1 style="text-align:center">Email</h1>
  <input align=middle type="email" placeholder="Enter your e-mail here"></input>
  <br>
  <br>
  <h1 style="text-align:center">Password</h1>
  <input align=middle type="password" placeholder="Enter your password here"></input>
  <p style="text-align:center">Working in progress!</p>
</body>

网站还在开发中，我尝试让所有元素居中，其他内容都成功了，但输入框就是不居中。

解决方案 #

嘿，我来帮你搞定这个问题！你之所以遇到这个情况，是因为你用的align=middle属性完全不是用来做水平居中的，而且这个属性是HTML的老古董了，现在早就不推荐使用啦。

先给你拆解下问题：<input>是行内块元素，它不支持用align这种老属性来做水平居中，而且align=middle本来的作用是控制元素的垂直对齐（比如和旁边的文字基线对齐），和你要的水平居中完全不沾边。

下面给你两种简单的解决办法，随便选一种都能快速搞定：

方法一：给输入框设置块级显示+自动外边距

这种方法可以单独控制每个输入框的居中，灵活性更高：

<head>
  <title>Login - Wearthux</title>
</head>
<body style="background-color:gray">
  <h1 style="text-align:center">Login to Wearthux</h1>
  <br>
  <h1 style="text-align:center">Email</h1>
  <!-- 给input添加样式，设为块级元素后用margin:0 auto实现水平居中 -->
  <input type="email" placeholder="Enter your e-mail here" style="display: block; margin: 0 auto;">
  <br>
  <br>
  <h1 style="text-align:center">Password</h1>
  <input type="password" placeholder="Enter your password here" style="display: block; margin: 0 auto;">
  <p style="text-align:center">Working in progress!</p>
</body>

原理很简单：把input设置为块级元素（display: block）后，它会根据内容自动收缩宽度，这时候用margin: 0 auto就能让它在父容器里水平居中。

方法二：给父容器设置文本居中（更简洁）

如果想一次性让所有元素都居中，包括输入框，直接给body添加text-align: center就行，因为行内块元素会继承父元素的文本对齐属性：

<head>
  <title>Login - Wearthux</title>
</head>
<!-- 给body加text-align:center，所有行内/行内块元素都会自动居中 -->
<body style="background-color:gray; text-align: center">
  <h1>Login to Wearthux</h1>
  <br>
  <h1>Email</h1>
  <input type="email" placeholder="Enter your e-mail here">
  <br>
  <br>
  <h1>Password</h1>
  <input type="password" placeholder="Enter your password here">
  <p>Working in progress!</p>
</body>

这种方法更省心，连原来每个标题和p标签上的text-align:center都可以删掉，因为body已经统一设置了，代码会更干净整洁。

你可以试试上面的方法，保证能让输入框乖乖居中！

内容来源于stack exchange