在div中创建div居中的文本内容

Question

我的HTML中有一个div，如下所示：

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

这两个元素的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;

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

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;
}

结果：

​

​