两个元素，一个居中，第二个在左/右答案

【问题标题】：Two elements, keep one centered and second to it's left/right两个元素，一个居中，第二个在左/右
【发布时间】：2017-11-25 20:10:06
【问题描述】：

How it looks

Desired effect

我确定某处有答案，但我找不到。我看到人们使用 flex，它看起来很有希望，但它似乎只是打破了一切。

原码：

.checkImg {
	margin-left: 10px;
	vertical-align: bottom;
}

form {
	text-align: center;
}

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
	<form>
		<!-- https://stackoverflow.com/questions/27838228/redirecting-the-user-to-the-same-page-after-login -->
		Nickname:<br>
		<input type="text" name="nickname"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
		<br>
		Password:<br>
		<input type="password" name="password">
		<br>
		Email:<br>
		<input type="email" name="email"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
		<br><br>
		<input type="submit" value="Submit">
	<form>
</body>
</html>

尝试从这里设置 flex：How to use flexbox

进展如何：

.checkImg {
  margin-left: auto;
  vertical-align: bottom;
}

form {
   text-align: center;
}

div {
  display: flex;
}

.flex {
  flex: 1;
  display: inline-flex;
  justify-content: center;
  text-align: center;
  align-self: flex-start
}

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
	<form>
		<!-- https://stackoverflow.com/questions/27838228/redirecting-the-user-to-the-same-page-after-login -->
		Nickname:<br>
		<div><input class="flex" type="text" name="nickname"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img></div>
		<br>
		Password:<br>
		<input type="password" name="password">
		<br>
		Email:<br>
		<input type="email" name="email"><img class="checkImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg"></img>
		<br><br>
		<input type="submit" value="Submit">
	<form>
</body>
</html>

我尝试了flex-grow: 0（在左侧设置输入，在右侧开始图像，移除拉伸），align-items: flex-start，但这些似乎都不起作用。感觉就像我真的很接近，但由于这是我第一次遇到 flex，我似乎无法找到正确的解决方案。

【问题讨论】：

我不确定你为什么要在这里使用 flex ......我会保持简单，例如jsfiddle.net/p7810pnr
好吧，我认为可能有更好的选择。谢谢，我可能会使用它，我只需将两个推送的输入字段包装到一个类中，并将 margin-left +30px 设置为它实际上位于页面的中心。这听起来很简单，而且是一个很好的解决方案。当我开始编程时，我只是尽力避免不良习惯和代码。
是的，我会尽快制定并提出更好的解决方案...

标签： alignment center elements

【解决方案1】：

一种可能的解决方案，使用 flexbox。（注意：您可以通过许多不同的方式实现相同的目标）。您也可以使用 ::after 伪元素，但在此示例中，我保留了您的图像。 Trick 是将图像位置设置为绝对位置，这样就不会影响对齐了。

    <form>

            <div >Nickname:<br>

    <input type="text" name="nickname" ><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
    </div>
<div>
        Password:<br>
        <input type="password" name="password">
</div>

        <div>
        Email:<br>
        <input type="email" name="email"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
    </div>


        <div>

    <input type="submit" value="Submit">
    </div>
    <form>

CSS：

    form {
display:flex;
align-items:center;
flex-direction: column;
}
div {
margin:10px;
text-align:center;
position:relative;

}
.checkImg {
  position:absolute;
 right:-30px;
}

演示：

form {
display:flex;
align-items:center;
flex-direction: column;
}
div {
margin:10px;
text-align:center;
position:relative;
  
}
.checkImg {
  position:absolute;
 right:-30px;
}

<form>
	
			<div >Nickname:<br>
	
    <input type="text" name="nickname" ><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
    </div>
<div>
		Password:<br>
		<input type="password" name="password">
</div>

		<div>
    	Email:<br>
		<input type="email" name="email"><img class="checkImg flex" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1SRSjmKURx3aIkIUvNZg2iyyzhTctX1nPlfn8Yo49JdeffVG8Pg">
    </div>
	
		
		<div>
   
    <input type="submit" value="Submit">
    </div>
	<form>

【讨论】：