两个元素，第一个居中，第二个居中 left/right

Question

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>
  <!--  -->
  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：

进展如何：

.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>
  <!--  -->
  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 和 none 似乎有效。感觉我真的很接近，但由于这是我第一次接触 flex，我似乎无法找到正确的解决方案。

Answer 1

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

    <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>

两个元素，第一个居中，第二个居中 left/right

Two elements, keep one centered and second to it's left/right

center

alignment

elements