Question

所以我有这个登录栏（我不要从w3schools.com复制，我只是借用头像：p）：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style> {
    button.cancle:hover
    background-color:red;
    cursor: pointer;
}
button.cancle {
    border: none;
    padding: 10px 18px;
    background-color:#f44336;
    color: white;
    margin: 8px;
}
input[type=submit] {
    color: white;
    background-color: #2D9409;
    cursor: pointer;
}
input {
    padding: 8px;
    margin: 8px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #ccc;
}
div {
    padding: 40px;
    background-color: LightGrey;
    display: block;
}
div.img	{
    text-align:center;
}
</style>
</head>
<body style="font-family:sans-serif">
<div class="login">
<form>
<div class="img">
    <img src=http://www.w3schools.com/howto/img_avatar2.png height=300px width=300px style="border-radius:50%">
</div>
<label>Username:</label><br>
<input type=text placeholder="Username..." required><br>
<label>Password:</label><br>
<input type=password placeholder="Password..." required>
<br>
<input type=submit value=Login>
<button class="cancle">Cancle</button>
<span style="float:right; margin: 16px;">Forgot <a href="#">password?</a></span>
</form>
</div>
</body>
</html>

＆＃13;

问题是，如果我调整窗口大小，图像将从<div>开始弹出。有人可以帮我这个吗？

请用css回答，谢谢！（我不知道如何使用视口，抱歉）

Answer 1

删除图像的高度和宽度样式属性，并将宽度设置为100％，最大宽度设置为300px（根据需要）。然后你的图像将正确地包含在你的div中。

集

在你的CSS中

div.img img {
    width: 100%;
    max-width: 300px;
}

在您的HTML中

<div class="img">
    <img src=http://www.w3schools.com/howto/img_avatar2.png style="border-radius:50%">
</div>

这是工作片段。

<!DOCTYPE html>
<html>

<head>
    <style>
        button.cancle: hover {
            background-color: red;
            cursor: pointer;
        }
        
        button.cancle {
            border: none;
            padding: 10px 18px;
            background-color: #f44336;
            color: white;
            margin: 8px;
        }
        
        input[type=submit] {
            color: white;
            background-color: #2D9409;
            cursor: pointer;
        }
        
        input {
            padding: 8px;
            margin: 8px;
            box-sizing: border-box;
            width: 100%;
            border: 1px solid #ccc;
        }
        
        div {
            padding: 40px;
            background-color: LightGrey;
            display: block;
        }
        
        div.img {
            text-align: center;
        }
        
        div.img img {
            width: 100%;
            max-width: 300px;
        }
    </style>
</head>

<body style="font-family:sans-serif">
    <div class="login">
        <form>
            <div class="img">
                <img src=http://www.w3schools.com/howto/img_avatar2.png style="border-radius:50%">
            </div>
            <lable>Username:</lable>
            <br>
            <input type=text placeholder="Username..." required>
            <br>
            <lable>Password:</lable>
            <br>
            <input type=password placeholder="Password..." required>
            <br>
            <input type=submit value=Login>
            <button class="cancle">Cancle</button>
            <span style="float:right; margin: 16px;">Forgot <a href="#">password?</a></span>
        </form>
    </div>
</body>

</html>

Answer 2

我喜欢下一个方法：

使用任何元素中的下一个类，您将把它作为父对象的中心：

.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

这对我很有帮助，就像一位老朋友......：P

干杯队友。

Answer 3

使用强大的CSS3 flexbox水平和垂直对齐图像中心。

<div class="container">
<img src="a" alt="">
</div>

<style>
.container{
height: 60px;
display : flex;
justify-content: center; //Horizontally center
align-items: center; //Vertically center
}
</style>

如果您有多张图片，则可以使用justify-content: space-around;。希望它有所帮助。

Answer 4

CSS需要更新：

div.img{
  text-align:center;
}
div.img img{
    width: 100%;
    max-width: 340px;
}

需要更新图像块的HTML标记：

<div class="img">
    <img src=http://www.w3schools.com/howto/img_avatar2.png style="border-radius:50%">
</div>

如何将图像置于<div>中心？

4 个答案: