Javascript 在具有图片背景的li元素中居中显示文本

如何在具有图片背景的li元素中水平/垂直居中文本

例如：

这是我目前的代码：

#frame {
    height: 100%;
}
.frame {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-y: hidden;
}
.frame .slidee {
    margin: 0;
    padding: 0;
    height: 100%;
    list-style: none;
}
.frame .slidee li {
    float: left;
    margin: 0 5px 0 0;
    padding: 0;
    width: 300px;
    height: 98%;
    border: solid #CCC 1px;
}
.ad {
    background-position: center;
    background-size: 100% auto;
}
#ad1 {
    background: url("http://blogs.arts.ac.uk/csm/files/2014/03/fashion-revolution.jpg");
}
<div id="frame" class="frame bag_item">
    <ul class="slidee">
        <li id="ad1"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

#帧{
身高：100%；
}
.框架{
宽度：100%；
身高：100%；
填充：0；
溢出y：隐藏；
}
.框架.幻灯片{
保证金：0；
填充：0；
身高：100%；
列表样式：无；
}
.frame.slidee li{
浮动：左；
边距：0 5px 0 0；
填充：0；
宽度：300px；
身高：98%；
边框：实心#CCC 1px；
}
.广告{
背景位置：中心；
背景尺寸：100%自动；
}
#ad1{
背景：url（“http://blogs.arts.ac.uk/csm/files/2014/03/fashion-revolution.jpg");
}

---

在这里拉小提琴：

您可以使用

文本对齐：居中用于水平对齐，
行高
用于垂直对齐

希望这对您有所帮助
您可以使用CSS，只需使用以下表格模拟技巧（我更改了文本大小和颜色以使其更可见）：


/*
主题名称：
主题URI：
说明：
版本：1.0
作者：
作者URI：
*/
html{
颜色：#444；
字体大小：100%；
背景：#F7F7URL（../images/bg.png）重复中心顶部；
身高：100%；
}
身体{
线高：1；
文本呈现：优化易读性；
-webkit字体平滑：抗锯齿；
身高：100%；
字体大小：24px；
颜色：#000000；
背景色：rgb（240240240）；
颜色：白色；
字体系列：无衬线；
}
/*布局容器样式*/
#主要{
垫面：6em；
垫底：3em；
身高：82%；
宽度：97%；
左：1米；
}
#布局、#菜单、#框架、.幻灯片、.菜单链接{
-webkit过渡：所有0.3轻松输入输出；
-moz转换：所有0.3秒都会变慢；
-ms转换：所有0.3秒都会变慢；
-o型过渡：所有0.3秒都会变缓；
过渡：所有0.3秒的缓进缓出；
}
.纯img响应{
最大宽度：100%；
高度：自动；
}
#框架{
身高：100%；
}
.框架{
宽度：100%；
身高：100%；
填充：0；
溢出y：隐藏；
}
.框架.幻灯片{
保证金：0；
填充：0；
身高：100%；
列表样式：无；
}
.frame.slidee li{
浮动：左；
边距：0 5px 0 0；
填充：0；
宽度：300px；
身高：98%；
边框：实心#CCC 1px；
}
.广告{
背景位置：中心；
背景尺寸：100%自动；
}
#ad1{
背景：url（“http://blogs.arts.ac.uk/csm/files/2014/03/fashion-revolution.jpg");
}
.tablediv{
显示：表格；
宽度：100%；
身高：100%；
}
特尔迪夫先生{
显示：表格行；
}
.tddiv{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}



这是文本









您可以做的最简单的事情是添加伪元素以帮助进行垂直对齐：

#ad1:after{
内容：''；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}

为什么会这样？因为文本内容和
：后面的
伪元素成为同级内联元素，并且因为最后一个元素的高度为100%，并且具有
垂直对齐：中间它会自动强制文本也对齐

查看下面的演示


/*
主题名称：
主题URI：
说明：
版本：1.0
作者：
作者URI：
*/
html{
颜色：#444；
字体大小：100%；
背景：#F7F7URL（../images/bg.png）重复中心顶部；
身高：100%；
}
身体{
线高：1；
文本呈现：优化易读性；
-webkit字体平滑：抗锯齿；
身高：100%；
字体大小：62.5%；
颜色：#000000；
背景色：rgb（240240240）；
颜色：#777；
字体系列：无衬线；
}
/*布局容器样式*/
#主要{
垫面：6em；
垫底：3em；
身高：82%；
宽度：97%；
左：1米；
}
#布局、#菜单、#框架、.幻灯片、.菜单链接{
-webkit过渡：所有0.3轻松输入输出；
-moz转换：所有0.3秒都会变慢；
-ms转换：所有0.3秒都会变慢；
-o型过渡：所有0.3秒都会变缓；
过渡：所有0.3秒的缓进缓出；
}
.纯img响应{
最大宽度：100%；
高度：自动；
}
#框架{
身高：100%；
}
.框架{
宽度：100%；
身高：100%；
填充：0；
溢出y：隐藏；
}
.框架.幻灯片{
保证金：0；
填充：0；
身高：100%；
列表样式：无；
}
.frame.slidee li{
浮动：左；
边距：0 5px 0 0；
填充：0；
宽度：300px；
身高：98%；
边框：实心#CCC 1px；
}
.广告{
背景位置：中心；
背景尺寸：100%自动；
}
#ad1{
背景：url（“http://blogs.arts.ac.uk/csm/files/2014/03/fashion-revolution.jpg");
文本对齐：居中；
字体大小：20px；
}
#ad1：之后{
内容：''；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}



一些文本内容









查看css-tricks.com/centering-css-complete-guide/这是一个关于水平/垂直居中所有选项的很好的参考资料。您可以将文本包装成span并对齐