與錶行顯示圖標圖像和文本行不在同一直線上

我試圖讓看起來像這樣的一個標籤頭，與錶行顯示圖標圖像和文本行不在同一直線上

但它出來像這樣，

我使用的表格顯示有三列一個用於圖像圖標，一個用於垂直線，另一個用於文本。我看到的問題是，

1）margin應用於中間線是不是在其兩側添加任何空間。

2）圖標圖像和文本沒有出現在同一水平上。圖標顯示在底部。

3）左/右邊緣施加到外表行是沒有得到顯示。

爲同一Plunker代碼here

什麼CSS屬性我缺少的是讓我的選項卡標題內容碰上與他們之間沒有空隙彼此！

來源

2016-04-13 Madhavan Kumar

還有就是你對錶.tab-title-box拼錯類名稱的可能性。

您不能在表格顯示時只使用邊距填充。
您應該使用vertical-align: middle第一個小區，其最後一個單元格的內容水平的圖標。
邊框可以添加到table和table-cell。將display: table-row更改爲display: table，它將起作用。

順便說一句，如果你想讓中間邊框變短一些，你需要在上面添加一行和下一行。下面是一個例子：http://codepen.io/dboris/pen/ZWxpJd。

來源

2016-04-13 14:22:03 dboris

我真的很喜歡太紀念這個答案是一個很好的....反正，我喜歡你指定類的每個元素的方式..感謝.. –

不客氣。使用類比內聯樣式更清晰。類是可重用的，它們使一切更具可讀性。 – dboris

你的意思是這樣的？

.table-title-box > * { 
 
    padding : 10px 20px; 
 
} 
 

 
.image{ 
 
    background-image: url('http://i.imgur.com/qsBdQzn.png'); 
 
    width: 40px; 
 
    height: 40px; 
 
    display: inline-block; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.vertical { 
 
    position: relative; 
 
    height: 70px; 
 
    border-left: 1px solid #f2f2f2; 
 
    border-right: 1px solid #c8c9ca; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <div class="tab-title-box" style="display:table;border-right:2px double black;border-left:2px double black;"> 
 
     <span class="tabIcon" style="display:table-cell;vertical-align:middle;;padding:0 10px"><em class="image"></em></span> 
 
     <span class="vertical" style="display:table-cell;margin-right:20px;"></span> 
 
     <div class="row" style="vertical-align: middle;display:table-cell;vertical-align:middle;padding:0 10px"> 
 
     <div class="tab-title-text" style='color:#ea7600;'>Overview</div> 
 
     <div class="tab-info">All is well</div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

https://plnkr.co/edit/hPoNm1NYHSEDQpYckfSM?p=preview

來源

2016-04-13 13:46:45

與錶行顯示圖標圖像和文本行不在同一直線上

回答

相關問題