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

Question

I'm sure there's an answer somewhere, but I'm unable to find it. I've seen people use flex and it looked promising, but it just seems to break things up.

Original code:

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

Trying to set up the flex from here: How to use flexbox

How it went:

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

I tried flex-grow: 0 (sets input on the left side, image on the right start, removing the stretching), align-items: flex-start and none of these seemed to work. It feels like I'm really close, but since this is my first encounter with flex, I can't just seem to find the right solution.

I am not sure why you want flex here...i would keep it simple, e.g. https://jsfiddle.net/p7810pnr/ — sinisake, Nov 25 '17 at 10:44
Well, I thought there might be a better option how to do it. Thanks, I'll probably use that, I'll just wrap two of the pushed input fields into a class and set the margin-left +30px so it's actually centered on the page. It sounds simple and like a good solution. As I'm starting with programming, I'm just trying my best to avoid bad habits and code. — Newstory, Nov 25 '17 at 11:18

score 0 · Accepted Answer · answered Nov 25 '17 at 12:10

One of possible solutions, with flexbox. (Note: you can achieve same on many different ways). You can also use ::after pseudo-element, but in this example i kept your image. Trick is to set image position to absolute, and then it will not affect alignment.

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

DEMO:

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>

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

1 Answers1