我想开始说我刚刚开始学习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个输入框，一个用于用户名另一个用密码，在这些框旁边有2个图片，一个用户键，一个用于密码。
TLDR;我希望页面中间的输入框与输入框旁边的图片（小图标）（如我的代码所示，但在中间）和我也想要用户的图片（头部一个）在整个结构的中间，或页面的中间。
基本上我想看到一切都一致。
我不知道我是否表达得足够好，我希望如此。我想看看html和css代码，非常感谢!!!
试试这个
.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是块。
也许尝试将样式属性添加到<head> </head>中的代码中
<style>
.center {
margin: auto;
width: 60%;
padding: 10px;
}
</style>