css - 如何在 <div> 中将图像居中？-6ren

css - 如何在
中将图像居中？

转载作者：太空宇宙更新时间：2023-11-03 22:46:26

所以我有这个登录栏(我不会从 w3schools.com 复制这个，我只是借用头像 :p ):

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

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

请仅使用 css 回答，谢谢!(我不知道如何使用视口(viewport)，抱歉)

最佳答案

删除图像的高度和宽度样式属性，并设置宽度为 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>