在CSS中使用居中徽标的分隔符 - 使用多个实例时出现奇怪的错误

我无法编码1px水平分隔符行，中心显示的标识为纯CSS。应该看起来像这样： Divider with logo centered 在CSS中使用居中徽标的分隔符 - 使用多个实例时出现奇怪的错误

多个实例存在问题：当我在单个页面上添加更多分隔符时，只有一个或两个分隔符会显示一行，其他分隔符只会显示该标识。

大约为中心的标志。有人在这里找到答案 - 但没有不客气，与多个实例发生错误：Divider with centred image in CSS?

这里是一个适合的解决方案进行的讨论，下面捣鼓。

CSS：

body { 
    margin: 0; 
    background: white; 
} 

header:after { 
    content: ''; 
    display: block; 
    width: 100%; 
    height: 1px; 
    background: #ccc; 
    margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */ 
} 

.logo { 
    position: relative; /* Brings the div above the header:after element */ 
    width: 200px; 
    height: 100px; 
    padding: 40px; 
    margin: 0 auto; 
    background: white url("http://placehold.it/200x100") no-repeat center center; 
} 

.logo img { 
    display: block; 
}

HTML：

<body> 
     <header> 
     <div class="logo"> 
     </div> 

     <div class="logo"> 
     </div> 

     <div class="logo"> 
     </div> 

     </header> 
    </body>

小提琴： http://jsbin.com/delixecobi/edit?html,css,output

来源

2017-06-09 nebaon

我完全改变了CSS。给.logo a position: relative和:after a position: absolute。您正在使用它为一个单头。这就是为什么它不起作用。

body { 
 
    margin: 0; 
 
    background: white; 
 
} 
 

 
.logo:after { 
 
    content: ' '; 
 
    display: block; 
 
    width: 100%; 
 
    height: 1px; 
 
    background: #ccc; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -1px; 
 
    left: -50%; 
 
    width: 200%; 
 
} 
 

 
.logo { 
 
    position: relative; /* Brings the div above the header:after element */ 
 
    width: 200px; 
 
    height: 100px; 
 
    padding: 40px; 
 
    margin: 0 auto; 
 
    background: white url("http://placehold.it/200x100") no-repeat center center; 
 
} 
 

 
.logo img { 
 
    display: block; 
 
}

<header> 
 
    <div class="logo"> 
 
    </div> 
 
    <div class="logo"> 
 
    </div> 
 
    <div class="logo"> 
 
    </div> 
 
</header>

预览

如果你想不交叉或切割线，使用负z-index。

来源

2017-06-09 09:49:39

太棒了。谢谢！看起来工作得很好。这里是z-index集的小提琴 - 以防人们想要使用它：http://jsbin.com/dinoligaya/1/edit？html，css，输出 – nebaon

还有一件事：如何扩大线来覆盖100％的宽度？似乎比我想象的更复杂。 – nebaon

@nebaon这很简单。你需要另一个包装，并把它作为'位置：相对' –

我找到了解决办法也为我的问题是如何得到专区内居中的文本 - 感谢网络的tiki对他的做法在这里：Line before and after title over image

在JSBin我把所有在一起并格式化/评论有点使其易于使用。你会发现：

分隔格式的IMG，文字和文本多行
稳定多个实例

body { 
 
    margin: 0; 
 
    background: white; 
 
} 
 

 
.logo:after { 
 
    content: ' '; 
 
    display: block; 
 
    width: 100%; 
 
    height: 1px; 
 
    background: #ccc; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -1px; 
 
    left: -50%; 
 
    width: 200%; 
 
    z-index: -1; 
 
} 
 

 
.logo { 
 
    position: relative; 
 
    /* Brings the div above the header:after element */ 
 
    width: 200px; 
 
    height: 100px; 
 
    padding: 20px; 
 
    /* also padding between line and logo */ 
 
    margin: 0 auto; 
 
    background: white url("http://placehold.it/200x100") no-repeat center center; 
 
} 
 

 
.logo img { 
 
    display: block; 
 
} 
 

 
.logotext { 
 
    width: 100%; 
 
    margin: 20 auto; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    font-weight: 300; 
 
    color: green; 
 
    /* color text */ 
 
} 
 

 
.logotext:before, 
 
.logotext:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 50%; 
 
    margin: 0 20 0 -55%; 
 
    /* 2nd no: space text to line on the left */ 
 
    vertical-align: middle; 
 
    border-bottom: 1px solid #ccc; 
 
    /* last: color line */ 
 
} 
 

 
.logotext:after { 
 
    margin: 0 -55% 0 20; 
 
    /* last no: space text to line on the right */ 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<header> 
 
    <div class="logo"> 
 
    </div> 
 
    <div class="logo"> 
 
    </div> 
 

 
    <div class="logotext"> 
 
    somesome</div> 
 

 
    <div class="logotext"> 
 
    somesome</div> 
 

 

 
</header>

该解决方案的一个主要缺点是它不允许将行的宽度定义为主视口的％。

来源

2017-06-09 10:52:22 nebaon

在CSS中使用居中徽标的分隔符 - 使用多个实例时出现奇怪的错误

回答

相关问题