html - 当我调整浏览器窗口大小时，我的 div 降到底部，顶部有一个大空间-6ren

html - 当我调整浏览器窗口大小时，我的 div 降到底部，顶部有一个大空间

转载作者：行者123 更新时间：2023-11-28 07:17:27

24

4

当我调整浏览器窗口大小时，我的 div 降到底部，顶部有一个大空间。我希望即使调整窗口大小小于 div 大小，我的 div 也应保留在页面中央。在我的学校，他们没有教过这个，但我想在页面中心对齐这个 div

    <!DOCTYPE html>
<html>
<head>
<title>CSS centering Done Right.</title>

<style>

* {
    margin: 0;
    padding: 0;
}
html, body, .m {
    height: 100%;
    width: 100%;
}
.m {
    opacity:1;
    font-size: 0;
    overflow: auto;
    text-align: center;
    /*styling>>*/
    background-color: #8F1C10;
}
.m::before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.m>div {
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 300px;
    padding: 14px;
    vertical-align: middle;
    /*styling*/
    color:white;
    background-color: #140A08;
    outline:none;
}

</style>

</head>
<body>

<title>CSS centering Done Right.</title>
<div class="m">
    <div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, enim, possimus, voluptates, quia voluptatibus voluptas eum quaerat iure aperiam asperiores debitis fuga itaque quibusdam a ad odio assumenda iusto voluptatem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, ex quia consequatur quae quasi amet veniam est quas error quos perferendis ducimus non similique in soluta magnam dolore molestias veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, doloremque iste magni in eveniet ipsa odio mollitia eligendi magnam placeat aliquam hic reprehenderit reiciendis itaque assumenda ratione delectus. Alias, quis.</div>
</div>

</body>
</html>

最佳答案

margin: auto; 是您所需要的。试试这个:

<style>

* {
    margin: 0;
    padding: 0;
}
/*html, body, .m {
    height: 100%;
    width: 100%;
}*/
.m {
    opacity:1;
    font-size: 0;
    overflow: auto;
    text-align: center;
    margin: auto;
    /*styling>>*/
    background-color: #8F1C10;
}
.m::before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.m>div {
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 300px;
    padding: 14px;
    vertical-align: middle;
    /*styling*/
    color:white;
    background-color: #140A08;
    outline:none;
}

</style>

关于html - 当我调整浏览器窗口大小时，我的 div 降到底部，顶部有一个大空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32279212/

24

4

0

文章推荐： javascript - meteor 和色贼不会合作

文章推荐： javascript - 排序不适用于下拉菜单

文章推荐： Javascript - 复制链接

r - 如何将可扩展时间数据作为 r ggplot 包中的一个因素呈现？ (即 1 小时、5 小时、10 小时)
我有 0 小时、3 小时、12 小时、24 小时、48 小时的数据组……我想绘制这些数据的图表，以便保留时间的比例。 runs <- c(1:25) hours <- as.factor(c(0, 3
swift - 如何计算从选定时间(小时)到给定持续时间的时间(小时)
例如，如果我选择了时间:下午 3 点和小时数:5 小时，则得到 (8pm) 作为答案“ 最佳答案 let calendar = Calendar.current let date = calendar
php - 两个相同的日期时间；一个显示 12 小时，另一个显示 24 小时
我有一个包含两个日期时间字段的表单。用户输入日期 (yyyy-mm-dd) 和时间(3 个框；小时、分钟、上午/下午)。出于某种原因，第一个没有保存为 24 小时制。以下数据为输入结果: 2011
javascript - 使用导出单位进行计算(例如 1 小时 * 1 英里/小时)
我一直在尝试使用导出单位进行计算，但到目前为止我还没有取得任何成果。我已经尝试过mathjs ，但如果我输入 1 小时 * 1 英里/小时，我会得到 UnsupportedTypeError: Fu
ubuntu - 每 3 小时 cron 作业和每 3+1 小时 cron 作业
我有两组要运行的 cronjob。第一个应该每 3 小时运行一次，第二个也应该每 3 小时运行一次，但比第一组晚一个小时。什么是正确的语法？ // every 3 hours 17 */3 * *
amazon-web-services - EC2 预留实例 - 24 个实例运行 1 小时(同一小时)是否等于 1 个实例运行 24 小时？
我知道 AWS 中的预留实例更多的是计费而不是实际实例——它们没有附加到实际实例——我想知道: 如果我在特定区域和可用区中购买特定时间的预留实例 - 如果我每天 24 小时使用单个实例与运行 24 个
r - 时间顺序(小时)
我试过: seq( from=as.POSIXct("2012-1-1 0", tz="UTC"), to=as.POSIXct("2012-1-3 23", tz="UTC"),
sql - SQL按日期分组(小时)
我有一个带有“日期”列的表。我想按小时分组指定日期。最佳答案 Select TO_CHAR(date,'HH24') from table where date = TO_DATE('2011022
sql - 小时、月份等的开始
我知道如何在 SQL (SQL Server) 中获取当前日期，但要获取当天的开始时间: select dateadd(DAY, datediff(day, 0, getdate()),0) (res
游戏结束后快速倒计时 + 1 小时
我正在尝试在游戏之间创建一个计时器，以便用户在失去生命后必须等待 5 分钟才能再次玩游戏。但是我不确定最好的方法是什么。我还需要它来防止用户在“设置”中编辑他们的时间。实现这一目标的最佳方法是什么
MySQL - 小时(日期时间)
我的查询有误。该错误显示预期的已知函数，得到“HOUR”。如果我删除这部分，查询将正常工作 (AND HOUR({$nowDate}) = 11) SELECT c FROM ProConvocati
javascript - 从javascript中的字符串中获取差异(小时)
var d1 = new Date(); var d2 = new Date(); d2.setHours(d1.getHours() +01); alert(d2); 这部分没问题。现在我试图在 (
ios - 为什么时间不自动更改为最新的分钟/小时？
我正在构建一个用于练习的基本时钟应用程序，但出于某种原因，时间不会自动更改为最新的分钟或小时。例如，当前时间是 17:56，但它显示的是 17:54，这是我打开应用程序的最后时间。 NSDate *n
html - 部分下划线(小时)
我创建了一张图片，我想将其用作页面的 hr。当它被上传时，它一直向左对齐。我希望它居中，在标题下。这是我的 CSS 代码: .section-underline { height: 35px
javascript - 如何使用毫秒计算超过一秒/小时？
这个问题已经有答案了: Getting difference in seconds from two dates in JavaScript (2 个回答) 已关闭 4 年前。我想计算两个具有不同格
php - 显示特定时间之前的天/小时
我需要计算到某个日期/时间的剩余时间(天/小时)。但是，我没有使用静态日期。假设我在每个星期日的 17:00 有一个事件。我需要显示到下一个事件的剩余时间，即即将到来的星期日 17:00。我
MySQL - -838 小时？
我正在执行这个脚本: SELECT EXTRACT(HOUR FROM TIMEDIFF('2009-12-12 13:13:13', NOW())); 我得到:-838。这是提取时 MySQL 可以
javascript 小时:分钟的正则表达式
复制代码代码如下: /** * 小时:分钟的正则表达式检查<br> * <br> * @param pInput 要检查的字符串 * @return boolean 返
WiFi名称个性好听沙雕连wifi5元/小时
连wifi5元/小时独领风骚朕好帅今晚你是我的人十里桃花高端定制厕所VP专用一只老母猪在家好无聊你爹的wifi 密码是叫爸爸全拼关晓彤和鹿晗分手了吗蹭了我的
python - 如何将以天、小时、分钟和秒为单位的时间转换为仅以秒为单位
我有以下数据框列: 我需要将 csv 列中的对象字符串数据转换为总秒数。示例:10m -> 600s 我试过这段代码: df.duration = str(datetime.timedelta(df

首页

博学

6Ren·AI

商城

html - 当我调整浏览器窗口大小时，我的 div 降到底部，顶部有一个大空间