Icon image and text line with table-row display is not on same line
Question
I am trying to make a tab header that looks like this,
But it comes out like this,
I am using table display with three columns one for image icon, one for vertical line, the other for text. The issues i am seeing are,
1) margin applied for the middle line is not adding any space on its sides.
2) Icon image and the text is not appearing on the same level. Icon is displayed towards the bottom.
3) Left/right border applied to the outer table row is not getting displayed.
Plunker code for the same is here
What css properties am i missing that makes my tab header contents to run into one another with no space between them!!!
2 answers
solution1
2 2016-04-13 13:46:45
Do you mean something like this?
.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>
solution2
2 ACCPTED 2016-04-13 14:22:03
There is a possibility that you misspelled the class name for the table .tab-title-box .
- You can't use margin for table display, only padding.
- You should use
vertical-align: middlefor the first cell to level the icon with the content of the last cell. - Borders can be added to
tableandtable-cell. Change thedisplay: table-rowtodisplay: tableand it will work.
Btw, if you want the middle border to be shorter, you need to add one row above and one row beneath this one.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.