跨单元中不工作的垂直对齐
提问于 2018-04-24 03:46:37
vertical-align:middle属性不适用于span元素。我尝试将文本中心和中间对齐放在span元素中。我尝试了以下代码：
span {
text-align: center;
vertical-align: middle; /* Not working */
height: 150px;
width: 150px;
border: 1px solid black;
display: block;
}<span>center</span>
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-04-24 03:48:46
您可以使用display: flex来实现这一点。
span {
height: 150px;
width: 150px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}<span>center</span>
vertical-align: middle不适用于display: block
Stack Overflow用户
发布于 2018-04-24 03:55:20
你对此有很多选择。我提供了3个例子：
- 使用
line-height属性(在本例中，您指定行高与高度相同)： .线-高度-中心{显示:内联块；线-高度:150；} - 使用
display: table： 表-中心{显示:内联表；}.表-中心跨度{显示:表格单元格；} - 使用
display: inline-flex;： 显示:内联-flex；对齐-项目:中心；对齐-内容:中心；}
span {
text-align: center;
vertical-align: middle; /* Not working */
height: 150px;
width: 150px;
border: 1px solid black;
}
.line-height-center {
display: inline-block;
line-height: 150px;
}
.table-center {
display: inline-table;
}
.table-center span {
display: table-cell;
}
.flex-center {
display: inline-flex;
align-items: center;
justify-content: center;
}<p>With line height property:</p>
<span class="line-height-center">center</span>
<p>With display table:</p>
<span class="table-center"><span>center</span></span>
<p>With display flex:</p>
<span class="flex-center">center</span>
Stack Overflow用户
发布于 2018-04-24 03:51:06
您使用的是显示:块；显示块具有框行为。
但你想要运行一个文本行为。
如果你有一个已知的高度，你可以只使用线的高度。
例如，如果高度为150 is：
line-height: calc(150px - 15px);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50000904
复制相关文章
点击加载更多
腾讯云开发者
