显示行之间的文本在站点中不起作用 [英] display text between line is not working in a site

问题描述

请访问此链接： http://demo.kidsdial.com/

在幻灯片图片下方，您可以看到显示在

below slideshow images, you can see " TOP OFFERS" text displaying between line

之间的TOP OFFERS文字，如果向下滚动，您可以看到类别文本，我使用与上面相同的代码，但

if you scroll down below, you can see " TOP CATEGORIES" text, i used same code for above also , but

TOP CATEGORIES文本不显示在行之间。

"TOP CATEGORIES" text is not displaying between lines.

基本上我使用以下链接。但为什么它不工作。

basically i am using following link . but why it's not working.

css技术用于中间有字词的水平线

对于上面的链接代码我使用这个太：

for above link code i am using this one too :

<div class= "horizontal_line_1 ">
<div><span>text TEXT</span></div>
</div>

推荐答案

只需更改

span:before, span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}

到

span:before, span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 12px;
}

基本上，你只是更改 1.2em 到 12px ，因为 1.2em 等效于 24px 。

Essentially, you're just changing 1.2em to 12px, as 1.2em is equivalent to 24px.

这篇关于显示行之间的文本在站点中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！