时间戳

首页 > 解决方案 > 我怎样才能使这个图像居中？

html - 我怎样才能使这个图像居中？

问题描述

很长一段时间以来，我一直在尝试解决这个问题，但我无法找到一个好的解决方案。我需要将此图像对齐在表格的中心，但我完全没有成功。你可能觉得我阐述的太多了，但这是因为 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 属性对齐并尝试将其对齐在中心并试图证明中心的内容！

标签： htmlcss

解决方案

.imagecontainer {
  text-align: center;
}

将完成这项工作。

推荐阅读