將hr標籤和img標籤對齊

Question

我試圖在同一行中按照該順序對齊hr標籤，圖像和hr標籤。

到目前爲止我的代碼

<div class="arrow"> 
    <hr class="left"> 
    <img src="http://bit.ly/100X8XQ" height="10" width="10"> 
    <hr class="right"> 
<div> 

CSS：

.arrow { 
    margin-top: 20px; 
} 

.left { 
    martin-left: 20px; 
} 

img { 
    display: inline-block; 
} 

.right { 
    martin-right: 20px; 
} 

我想有顯示：在多個地方內嵌塊，但我無法得到它的工作。有沒有辦法解決它？

http://jsfiddle.net/ceobm2he/

Answer 1

你可以只設置一個負的利潤率在圖像上

DEMO http://jsfiddle.net/ceobm2he/2/

img{ 
    display: block; 
    margin:-6px auto 0 auto; 
} 
.left { 
    margin:0 20px; 
} 

如果你想在圖像周圍的一些空間，然後添加一些填充和背景樣式

DEMO http://jsfiddle.net/ceobm2he/4/

Answer 2

有點奇怪的要求。 <hr>具有語義含義，不應僅用於造型目的。設計中的線通常通過邊框/輪廓完成。

但是，這是你可能想要的東西：

.arrow{ 
 
} 
 

 
.left{ 
 
    margin-right:20px; 
 
    float: left; 
 
    width: 46%; 
 
} 
 

 
img{ 
 
    float: left; 
 
} 
 

 
.right{ 
 
    margin-left:20px; 
 
    float: right; 
 
    width: 46%;  
 
}

<div class="arrow"> 
 
    <hr class="left"> 
 
    <img src="http://bit.ly/100X8XQ" height="10" width="10"> 
 
    <hr class="right"> 
 
<div>

Fiddle here。

注意：代碼中存在「marGin」這個詞的拼寫錯誤。

Answer 3

使用calc計算寬度的另一個版本hr個標籤：

.arrow > * { 
 
    display: inline-block; 
 
} 
 
.arrow hr { 
 
    width: calc(50% - 45px); /* 45px = desired margin left + right */ 
 
} 
 
.arrow .left { 
 
    margin-left: 20px; 
 
} 
 
.arrow img { 
 
    margin: 0; 
 
    margin: 0 10px; 
 
} 
 
.arrow .right { 
 
    margin-right: 20px; 
 
}

<div class="arrow"> 
 
    <hr class="left" /> 
 
    <img src="http://bit.ly/100X8XQ" height="10" width="10" /> 
 
    <hr class="right" /> 
 
</div>

注：calc功能在所有主要的瀏覽器IE9，包括支持+。