垂直居中：Bootstrap 3面板標題中的內容

adding chevrons在摺疊Bootstrap 3面板的面板標題後，我試圖讓它們垂直居中。垂直居中：Bootstrap 3面板標題中的內容

這是面板的標題是什麼樣子：

<div class="panel-heading"> 
    <h3 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseActivity1" class="collapsed"> 
     Truck maintenance<br /> 
     <small>Monday t/m Wednesday</small> 
    </a> 
    </h3> 
</div>

正如你可以在這個JSFiddle看到，當標題包含多行排列是不完全正確。

Q1：如何在面板標題中垂直居中雪佛龍？似乎無法找到適用於多行和單行的解決方案。

Q2：如示例中所示，對於字幕推薦的HTML標記是什麼？在h3下面使用h4？

來源

2014-07-15 Willem-Aart

你能改變標記嗎？即你會反對增加一個跨度到錨？ – Pete

是的，我可以更改標記。我現在正在學習繞過HTML和CSS的方式，使用Bootstrap創建我的第一個小項目。希望使用適當的語義。你的建議是什麼？ –

對於僞元件，例如在這些中，絕對定位與CSS變換組合往往是最佳的選擇

JSfiddle Demo

CSS

.panel-heading a { 
    text-decoration: none; 
    display: block; 
    position: relative; 
} 
.panel-heading a:after { 
    font-family:'Glyphicons Halflings'; 
    content:"\e114"; 
    position: absolute; 
    top:50%; 
    left:100%; 
    -webkit-transform:translate(-100%, -50%); 
    transform:translate(-100%, -50%); 
    color: grey; 
} 
.panel-heading a.collapsed:after { 
    content:"\e080"; 
}

變換是IE9和最多CanIUse.com但回退負邊際可用。

來源

2014-07-15 13:48:42

這似乎工作得很好，謝謝！ –

垂直居中：Bootstrap 3面板標題中的內容

回答

相關問題