引導面板標題與垂直中間字符/圖標

Question

如何在小設備上顯示時定位垂直中間（< 600px寬度）？

<div class="row"> 
    <div class="col-sm-12"> 
    <section class="panel panel-default panel-slider"><div class="panel-heading"> 
     <h1 class="panel-title" style="font-size:18px"> 
      Test with long description in title panel bla bla<a class="align-middle more pull-right" href="https://example.com" title="" data-toggle="tooltip" data-placement="right" data-original-title="more" ><i>x</i></a> 
     </h1> 
</div> 
<div class="panel-body"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-8" style="margin-bottom: 10px;"> 
      ... 
     </div> 
</div> 

目前，它是：

應該是：提前

https://jsfiddle.net/9dtu4en1/

謝謝！

親切的問候 亞歷

Answer 1

我會使用Flexbox的上h1了更流暢的縮放，並刪除align-middle & pull-right（以避免浮動這將使它的父母不考慮孩子的身高）從a：

External Fiddle to resize

段：

h1 { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-sm-12"> 
 
    <section class="panel panel-default panel-slider"> 
 
     <div class="panel-heading"> 
 
     <h1 class="panel-title" style="font-size:18px">Test with long description in title panel bla bla 
 
      <a class="more" href="https://example.com" title="" data-toggle="tooltip" data-placement="right" data-original-title="more"><i>x</i></a> 
 
     </h1> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-12 col-md-8" style="margin-bottom: 10px;"> 
 
      ... 
 
      </div> 
 
     </div>