我怎样才能使这个图像居中？ [复制]答案

【问题标题】：How can I bring this image to center? [duplicate]我怎样才能使这个图像居中？ [复制]
【发布时间】：2021-08-29 19:53:28
【问题描述】：

很长一段时间以来，我一直在尝试解决这个问题，但我无法找到一个好的解决方案。我需要将此图像对齐表格的中心，但我完全没有成功。你可能觉得我阐述的太多了，但这是因为 StackOverflow 不让我发布这个问题，因为它认为这个问题需要深入阐述。我不知道为什么。这是我的 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>

这是我的 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;
}

如何将图像居中对齐？我尝试了很多方法。但我做不到。我尝试使用 display flex 属性对齐并尝试将其对齐在中心并尝试在中心对齐内容！

【问题讨论】：

你想要它在屏幕中间吗？
我想保持它在垂直部分，但我想将它水平对齐到表单的中心。
永远不要使用<center>标签。在 Chrome 中工作，但已过时。

标签： html css

【解决方案1】：

.imagecontainer {
  text-align: center;
}

会做的。

【讨论】：

不，这不起作用。这就是我问这个问题的原因。即使我把 !important 放在它之后，它也不起作用?

【解决方案2】：

添加 text-align:center 应该可以解决您的问题 -

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

【讨论】：

不要使用内联样式，不推荐使用。谢谢！

【解决方案3】：

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

您需要在父级上使用 flex 属性。将此添加到您的 CSS 中

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

【讨论】：

【解决方案4】：

只使用边距

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>

【讨论】：

【解决方案5】：

尝试在 imagecontainer div 上使用margin:auto。

【讨论】：

【解决方案6】：

你可以使用<center>标签。

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

只需将上面的代码放在 imagecontainer div 的位置。您需要将 div 包裹在 center 标记中。

【讨论】：

抱歉，<center> 元素是 deprecated and should not be used.