Question

我想开始说我刚刚开始学习CSS，（几天前完成了学习HTMl）并且我在如何将输入文本放在中间并且输入文本旁边的图片时遇到了一些麻烦。为了更具体一点，看看我的代码。

<html>

<head>
  <title>Login</title>
</head>

<body>
  <div class="Wrapper">
    <div class="main">
      <form>
        <div>
          <div>
            <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-64.png">
          </div>
          <input type="text" placeholder="Username"><img src="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/key-16.png" </div>
          <div>
            <input type="text" placeholder="Password"><img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672396-lock-16.png" </div>
      </form>
      </div>
      <div>
      </div>
</body>

</html>

它基本上会显示2个输入框，一个用于用户名另一个用密码，两个图片旁边的那些框，密钥一个用户，密钥一个用于密码。

TLDR;我希望页面中间的输入框与输入框旁边的图片（小图标）（如我的代码所示，但在中间）和我也想要用户的图片（头部一个）在整个结构的中间，或页面的中间。

基本上我希望看到一切都是一致的。

我不知道我是否表达得足够好，我希望如此。我想看看html和css代码，非常感谢!!!

Answer 1

试试这个

.main {     
text-align:center;
 }

<html>

<head>
  <title>Login</title>
</head>

<body>
  <div class="Wrapper">
    <div class="main">
      <form>
        <div>
          <div>
            <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-64.png">
          </div>
          <input type="text" placeholder="Username"><img src="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/key-16.png" </div>
          <div>
            <input type="text" placeholder="Password"><img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672396-lock-16.png" </div>
      </form>
      </div>
      <div>
      </div>
</body>

</html>

要对齐图像，最好的方法是使用此css样式：

    img {
     display: block;
     margin-left: auto;
     margin-right: auto;
    }

在你的代码中，由于“div”，我正在使用text-align becouse。文本对齐属性使用块容器，而不是内联元素，img是内联元素，但div是块。

Answer 2

也许尝试将样式属性添加到<head> </head>

中的代码中

<style>
.center {
    margin: auto;
    width: 60%;
    padding: 10px;
}
</style>

如何将输入框和图像对齐（或在页面中间）

2 个答案: