css - 在div中制作一个div中心的文本内容

Question

我的 HTML 中有一个像这样的 div:

<div id="audio"><span>فایل های صوتی</span></div>

这2个元素的CSS是这样的:

#audio{
 width: 100%;
 height: 11%;
 background-color: #3F1954;
}

span{
 font-size: 20px;
 color: white;
 text-align: center;
 font-family: btitr;
}

我希望跨度在 div 中居中(水平和垂直)，当我放大或缩小我的页面时它保持居中。如果我删除 span 标签，用

text-align: center;

我可以让它居中(但只能水平)我应该怎么做才能使其居中垂直？我应该删除 span 还是必须保留它？

Answer 1

您可以在 div css 中添加 display: table ，在 span css 中添加 vertical-align: middle , display: table-cell 。 Live Demo

HTML代码:

<div id="audio"><span>فایل های صوتی</span></div>

CSS 代码:

#audio {
    width: 100%;
    height: 20px;
    background-color: #3F1954;
    text-align: center;
    display: table;
}
span {
    font-size: 20px;
    color: white;
    text-align: center;
    font-family: btitr;
    vertical-align: middle;
    display: table-cell;
}

结果: