css - cssを使ってロゴ画像の左右(中央)に線を引く

Question

css を使用して、ロゴ画像の中心を線で結ぶ方法を知りたいです。以下のリンクを参照してください。

例

ありがとうジュリアン

Answer 1

絶対配置を使用した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>

20 はロゴ画像の高さの半分であるため、各 div の相対位置を -20px に設定します。したがって、ロゴ画像 SRC の高さが 80 ピクセルの場合、両方の div をtop:-40px;

作業例: http://jsfiddle.net/Edd6j/2/

Answer 3

これは1つのアプローチです。絶対に配置されたスパンを取り消し線として使用し、スパンと画像を含む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;
}