html - 对齐在垂直中心
问题描述
我无法#container
垂直对齐其内容在中心。我认为添加更多<div>
标签会有问题,我无法控制它们。
我想要文本并#container
在.content
垂直中心对齐而不添加任何额外的空间。
#container {
display: grid;
padding: 20px;
grid-template-areas: 'sideone sideone sidetwo sidetwo sidethree sidethree';
grid-gap: 20px;
text-align: center;
}
.content {
display: table;
margin: 15px;
height: 500px;
width: 100%;
transition-duration: 0.15s;
border: 2px solid #3B3B3B;
}
<div class="content">
<div id="container">
<div style="grid-area: sideone;">
<p>あ - ა</p>
<p>い - ი</p>
<p>う - უ</p>
<p>え - ე</p>
<p>お - ო</p>
</div>
<div style="grid-area: sidetwo">
<p>か - კა</p>
<p>さ - სა</p>
<p>た - ტა</p>
<p>な - მა</p>
<p>は - ჰა</p>
</div>
<div style="grid-area: sidethree">
<p>き - კი</p>
<p>し - ში</p>
<p>ち - ჩი</p>
<p>に - ნი</p>
<p>み - მი</p>
</div>
</div>
</div>
解决方案
添加margin:0px auto;
到 .content 中,它应该与容器的中心对齐。
它应该看起来像这样:
.content {
display: table;
margin: 15px;
height: 500px;
width: 100%;
transition-duration: 0.15s;
border: 2px solid #3B3B3B;
margin:0px auto;
}
推荐阅读
- swiftui - SwiftUI displayModeButtonItem 是内部管理的
- amazon-web-services - 为 docker 容器运行推理模型提供额外的输入
- python - Pandas 根据另一个数据框中 2 列的值过滤行
- javascript - 部署失败的 Netlify
- java - 删除对象以释放内存 JAVA
- python - 如何使用与第一列一对多关系的动态长度列创建 Python 数据框
- python - 将灰度图像转换为 3 通道图像
- telegram - 如何在 Telegraf 库中使用 Telegram 官方 API
- flutter - Flutter 错误:RenderPhysicalModel 对象在布局期间被赋予了无限大小
- python - 用于时间序列预测的 ARIMA/SARIMAX