How can I bring this image to center?

Question

For a long time, I am trying to resolve this issue but I was not able to find a good solution for this. I need to align this image on the center of the form but I am totally unsuccessful in it. You may feel like I am elaborating too much, but this is because StackOverflow is not letting me post this question because it thinks that this question needs deep elaboration. I don't know why. This is my HTML:

<body>
    <div class="wrapper">
        <div class="form-container">
            <h2>Login Form</h2>
            <br>
            <form action="" class="login-form">
                <div class="imagecontainer">
                    <img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
                        alt="Avatar" class="avatar">
                </div>
                <div class="container">
                    <label for="uname"><b>Username</b></label>
                    <input type="text" placeholder="Enter Username" name="uname" required>

                    <label for="psw"><b>Password</b></label>
                    <input type="password" placeholder="Enter Password" name="psw" required>

                    <button type="submit">Login</button>
                </div>
            </form>
        </div>
    </div>
</body>

This is my CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: 0;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: orange;
}

.form-container {
  display: block;
  width: 70vw;
  height: 70vh;
  padding-bottom: 150px;
}

form {
  border: 3px solid #f1f1f1;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  padding: 14px 20px;
  margin: 8px 0;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

img.avatar {
  width: 20%;
}

.container {
  padding: 16px;
}

How can I align the image in the center? I have tried many ways. But I am not able to do it. I have tried aligning using display flex property and tried aligning it in the center and tried to justify the content in the center!

I want to keep it as it is in the vertical section but I want to horizontally align it to the center of the form. — Pritam, Jun 13 '21 at 18:16

score 3 · Answer 1 · answered Jun 13 '21 at 18:15

3

.imagecontainer {
  text-align: center;
}

Will do the job.

answered Jun 13 '21 at 18:15

ent3

192
1
7

Nope this is not working. That's why I asked the question. Even if I put !important after it, then also it isn't working – Pritam Jun 13 '21 at 18:18

Amit Gupta · Answer 2 · 2021-06-13T18:18:32.347

Adding text-align:center should solve your problem -

<div class="wrapper">
            <div class="form-container">
                <h2>Login Form</h2>
                <br>
                <form action="" class="login-form">
                    <div class="imagecontainer" style="text-align:center">
                        <img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
                             alt="Avatar" class="avatar">
                    </div>
                    <div class="container">
                        <label for="uname"><b>Username</b></label>
                        <input type="text" placeholder="Enter Username" name="uname" required>

                        <label for="psw"><b>Password</b></label>
                        <input type="password" placeholder="Enter Password" name="psw" required>

                        <button type="submit">Login</button>
                    </div>
                </form>
            </div>
        </div>

Don't use inline styles, they are not recommended. Thanks! – no ai please Jun 13 '21 at 18:18 — no ai please, Jun 13 '21 at 18:18

score 2 · Accepted Answer · answered Jun 13 '21 at 18:22

* {
  padding: 0;
  margin: 0;
  box-sizing: 0;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: orange;
}

.form-container {
  display: block;
  width: 70vw;
  height: 70vh;
  padding-bottom: 150px;
}

form {
  border: 3px solid #f1f1f1;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  padding: 14px 20px;
  margin: 8px 0;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.imagecontainer {
  display: flex;
  justify-content: center;
}

img.avatar {
  width: 20%;
}

.container {
  padding: 16px;
}

<body>
  <div class="wrapper">
    <div class="form-container">
      <h2>Login Form</h2>
      <br>
      <form action="" class="login-form">
        <div class="imagecontainer">
          <img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
        </div>
        <div class="container">
          <label for="uname"><b>Username</b></label>
          <input type="text" placeholder="Enter Username" name="uname" required>

          <label for="psw"><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="psw" required>

          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  </div>
</body>

You need to use the flex property on the parent. Add this to your css

 .imagecontainer {
  display: flex;
  justify-content: center;
}

score 1 · Answer 4 · answered Jun 13 '21 at 18:20

Just use margin

html, body {
  margin: 0;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: orange;
}

.form-container {
  display: block;
  width: 70vw;
  height: 70vh;
  padding-bottom: 150px;
}

form {
  border: 3px solid #f1f1f1;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  padding: 14px 20px;
  margin: 8px 0;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.imagecontainer {
  text-align: center;
}

img.avatar {
  width: 20%;
}

.container {
  padding: 16px;
}

<body>
    <div class="wrapper">
        <div class="form-container">
            <h2>Login Form</h2>
            <br>
            <form action="" class="login-form">
                <div class="imagecontainer">
                    <img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
                        alt="Avatar" class="avatar">
                </div>
                <div class="container">
                    <label for="uname"><b>Username</b></label>
                    <input type="text" placeholder="Enter Username" name="uname" required>

                    <label for="psw"><b>Password</b></label>
                    <input type="password" placeholder="Enter Password" name="psw" required>

                    <button type="submit">Login</button>
                </div>
            </form>
        </div>
    </div>
</body>

score 1 · Answer 5 · answered Jun 13 '21 at 18:22

1

Try to use margin:auto on imagecontainer div.

answered Jun 13 '21 at 18:22

Aliaksandra Neviarouskaya

86
5

score 0 · Answer 6 · answered Jun 13 '21 at 18:28

0

You can make use of <center> tag.

<center>
 <div class="imagecontainer">
  <img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
 </div>
</center>

Just place the above code in place of imagecontainer div. You need to wrap the div in center tag.

answered Jun 13 '21 at 18:28

Zahid Wadiwale

96
1
10

Sorry, but the `` element is [deprecated and should not be used.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) – Nat Riddle Jun 13 '21 at 19:51

How can I bring this image to center?

6 Answers6