與單選按鈕的面板對齊

Question

我正在使用它來顯示多個產品，並使其正常工作，除了我試圖讓我的字幕與上面的產品標題對齊。

我想第一行的標題和第二行的子標題，但不希望小標題包裹在單選按鈕下。

也想縱向居中面板標題行的單選按鈕。

<div class="pull-right"> 
    Some image or <br /> 
    images will go <br /> 
    over here. 
</div> 
<div class="panel-group pull-left" id="products"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber1"> 
      <h4 class="panel-title"> 
       <div> 
        <input type="radio" name="specs"> Some Product Title #1<br /> 
         Some Product Subtitle 
       </div> 
      </h4> 
     </div> 
     <div id="partnumber1" class="panel-collapse collapse"> 
      <div class="list-group"> 
       <ul class="list-group"> 
        <li class="list-group-item">Some product data</li> 
        <li class="list-group-item">Some product data</li> 
       </ul> 
      </div> 
     </div> 
     <div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber2"> 
      <h4 class="panel-title"> 
       <div> 
        <input type="radio" name="specs"> Some Product Title #2 <br /> 
         Some Product Subtitle 
       </div> 
      </h4> 
     </div> 
     <div id="partnumber2" class="panel-collapse collapse"> 
      <div class="list-group"> 
       <ul class="list-group"> 
        <li class="list-group-item">Some product data</li> 
        <li class="list-group-item">Some product data</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

https://jsfiddle.net/blaine109/um7m89hp/

Answer 1

取出<br />，使文字內聯。

<h4 class="panel-title"> 
    <div> 
    <input type="radio" name="specs"> 
    <span> Some Product Title #1 </span> 
    <span>Some Product Subtitle</span> 
    </div> 
</h4> 

Answer 2

我想建議你使用絕對位置的單選按鈕link。如果你支持現代瀏覽器不僅可以使用

transform: translateY(-50%) 

，而不是

margin-top: -6px; // half of the height of the radio button 

Answer 3

Demo

使用此CSS

.panel-title { 
    cursor: pointer; 
    position: relative; /* so that child elements remain in this */ 
} 

.panel-title { 
    margin-left: 30px; /* pad to leave room for the radio */ 
} 

.panel-title input{ 
    position: absolute; 
    margin: auto; /* margin, top and bottom to vertical align */ 
    top: 0; 
    bottom: 0; 
    left: -30px; /* -ve to the margin to push the radio into the margin */ 
}