html - Doctype bootstrap 垂直对齐
问题描述
<!DOCTYPE html>
我已经下载了 bootstrap 4.3.1,如果我在 html 的头部有一个标签,我在任何情况下都无法获得垂直对齐。
编辑:使用 body 标签,结果是一样的。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheets/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="container">
<div class="row h-100 justify-content-center align-items-center">
<div class="mx-auto col-sm-6" style="border: 2px solid red">
<h3 class="text-center">Heading3</h3>
<h4 class="text-center">Heading4</h4>
</div>
</div>
</div>
</body>
</html>
除非我注释掉 doctype,否则这个 div 仍然停留在屏幕顶部。我尝试过添加自定义 css,body{height:100%}
并且body{min-height:100%}
无论如何,doctype 都会破坏垂直对齐。这在 Chrome 和 Safari 中都会发生。有任何想法吗?
解决方案
推荐阅读
- selenium - IntelliJ IDEA Selenium 插件运行配置异常:“仅允许本地连接”
- python - 将颜色映射到 plotly go.Pie 图中的标签
- java - ActiveMQ Artemis 和 Logstash JMX 输入
- python - Python 将 csv 字符串转换为 Pandas DataFrame
- r - 尝试在 ggplot2 中创建 2 x 12 热图“美学必须是长度 1 或与数据相同 (12):x”
- c# - 寻找有关在 C# 中使用 USING 的说明
- mapbox - 在 Mapbox Android SDK 中显示具有自定义属性的圆环图集群
- spring-boot - Java 是否有类似于 .Net Framework 和 Entity Framework 的迁移工具
- python - Plotly:如何防止标题与情节重叠?
- python - 将变量从 PHP 发送到 Python?