使用css在徽标图像的左右（中心）上绘制一条线_Css

使用css在徽标图像的左右（中心）上绘制一条线

css

使用css在徽标图像的左右（中心）上绘制一条线,css,Css,我想知道如何使用css使一条线穿过徽标图像的中心。请参阅下面的链接：谢谢朱利安这里有一种使用绝对定位的方法 <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

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

谢谢

朱利安

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

<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>

这里有一种方法，它使用一个绝对定位的跨距作为切入点，使用一个带有跨距和图像的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>

这应该行得通

<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为80像素高，则将两个div设置为

top:-40px
工作示例：您尝试过什么吗？我尝试过修改页眉文本解决方案，但未能使行居中。upvote因为有人忘记了他在哪里，但我需要一个解决方案，使行随着浏览器大小的变化而展开和收缩。类似于标题文本，每边有一行。好的，我更新了代码，这是你想要的吗？当浏览器调整大小时，线条会增长/收缩，现在两边各有两条线条。有没有办法在不固定删除线宽度的情况下实现这一点？因此，当浏览器更改宽度时，线条会展开/收缩。此外，我想与线的标志是在我的页面中心。
<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>