1

I want to start off saying that I just started learning CSS, (got done learning HTMl couple days ago) and I'm having a little bit of trouble with how to put input text in the middle with pictures next to input text. To be a little bit more specific look at my code.

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

it will basically show you 2 input boxes, one for username another with password, with 2 pictures next to those boxes, the key one for user, the lock one for password.

TLDR; I want the input boxes on the middle of the page with the pictures(little icons) next to the input boxes (like showed in my code, but in the middle) and a I also want the picture of the user (the head one) in the middle of that whole structure, or middle of the page.

basically I would like to see everything aligned.

I don't know if I expressed myself well enough, I hope so. I would like to see the html and css code, thank you so much!!!

connexo
  • 53,704
  • 14
  • 91
  • 128
oneWhisper
  • 11
  • 2
  • 1
    Edit your question, then click "Edit snippet" which I pasted your code into. The tags appearing in red letters indicate your HTML has invalid structure, e.g. your `img` tags are not closed. Fix that first. – connexo Mar 01 '18 at 21:06
  • I know it was struggle when I tried to post my question because the code wouldn't show up properly, so I had to do 4 spaces for each line, in order for it to appear, but when I run it with snippet code, it works for me, I mean, it shows me what Initially meant to show. – oneWhisper Mar 01 '18 at 21:08
  • We're not going to help you with invalid HTML. Edit your question and in edit snippet mode fix the errors. Click "Tidy" on the left to find if your code still has basic errors. – connexo Mar 01 '18 at 21:09
  • Possible duplicate of [How to horizontally center a
    in another
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div)
     – Heretic Monkey Mar 01 '18 at 21:11

2 Answers2

1

Try with this

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

To align images the best way is use this css style:

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

In your code, I'm using text-align becouse works thanks to the "div". Text-align property work with block containers, not with inline elements, and img is an inline element, but div is block.

mperez
  • 141
  • 5
  • This answer would be of more use to the OP if you explained what you changed and why, after all, they did state they were learning – Paul Carroll Mar 01 '18 at 21:36
0

Maybe try adding Style Attribute to your code inside <head> </head>

<style>
.center {
    margin: auto;
    width: 60%;
    padding: 10px;
}
</style>
Mylonas K.
  • 389
  • 1
  • 3
  • 13