在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中居中（horizentaly和verticaly），当我放大或缩小我的页面时，它保持居中。 如果我删除span标记，用

text-align: center;

我可以让它居中（但只有horizentaly） 我应该怎么做才能使它成为中心的？ 我应该删除跨度还是必须保留？

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

结果：