在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中使用居中徽標的分隔符 - 使用多個實例時出現奇怪的錯誤

回答

相關問題