css - 使用 css 在 logo 图像的左右（中心）画一条线

Question

我想知道如何使用 css 让一条线穿过徽标图像的中心。请参阅下面的链接：

例子

谢谢朱利安

Answer 1

这是使用绝对定位的一种方法

<div>
    <div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0"></div>
    <img style="position:absolute;top:0;left: 45px" src="http://placehold.it/100x150" />
    <div style="height:75px;border-bottom:1px solid black;width:30px;display:inline-block;position:absolute;top:0;left:160px"></div>
</div>

example

Answer 2

这应该工作

<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>
<img src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" width="40px" height="47px"></img>
<span style="width:60px;"><div style="min-width:60px; max-width:60px; max-height:3px; min-height:3px; background-color:black; display: inline-block; position:relative; top:-20px;"></div></span>

我将每个 div 的相对位置设置为 -20px，因为 20 是徽标图像高度的一半。因此，如果您的徽标图像 SRC 比将两个 div 设置为 80 像素高top:-40px;

工作示例：http: //jsfiddle.net/Edd6j/2/

Answer 3

这是一种方法，它使用绝对定位的跨度作为删除线，并使用其中包含跨度和图像的 div 来定位删除线，这是一个工作示例

这是代码。

<div class="logo-container">
    <span class="logo-line"></span>
    <img class="logo" src="http://api.ning.com/files/Fd0Hyt-VB-mLJyE6xLYZ**QLu2VVQfvnaIEzyxSO11rwdkqRti2q4ra1ES1p8jr1BpSEJSaRTmqdCOv-6CXzMGxmhyl-gUex/applelogo.gif" alt="apple logo"></img>
    <span class="logo-line"></span>
</div>

CSS：

.logo-container {
    position: relative;
    height: 87px;
    width: 35%;
    margin: 0 auto;
    min-width: 144px;
}

.logo {
    position: relative;
    width: 72px;
    height: 87px;
    z-index: 2;
}

.logo-line {
    position: relative;
    display: inline-block;
    top: -50%;
    width: 20%;
    height: 2px;
    background: #333;
}