如何放置地方在排行中設置文本中間行

Question

我試圖將文本放在與分頁按鈕相同的行。

正如你可以在下面的代碼中看到，我試圖把文成<span>元，上漲跨度的高度，和/或使用該設置vertical-align: middle;沒有運氣。

<div class="row"> 
    <div class="col-md-2"> 
     <nav aria-label="Page navigation"> 
      <ul class="pagination"> 
       <li> 
        <a href="#" aria-label="Previous"> 
         <span aria-hidden="true">&laquo;</span> 
        </a> 
       </li> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
       <li><a href="#">5</a></li> 
       <li> 
        <a href="#" aria-label="Next"> 
         <span aria-hidden="true">&raquo;</span> 
        </a> 
       </li> 
      </ul> 
     </nav> 
    </div> 
    <div class="col-md-1" style ="vertical-align: middle;"> 
     <span style="height: 70px; display: block;"> 
      10 of 137 items 
     </span> 
    </div> 
</div> 

感謝您的幫助

Answer 1

一個valign類添加到您的行，使得它flex與align-items: center垂直對準。

.valign { 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row valign"> 
 
    <div class="col-md-2"> 
 
     <nav aria-label="Page navigation"> 
 
      <ul class="pagination"> 
 
       <li> 
 
        <a href="#" aria-label="Previous"> 
 
         <span aria-hidden="true">&laquo;</span> 
 
        </a> 
 
       </li> 
 
       <li><a href="#">1</a></li> 
 
       <li><a href="#">2</a></li> 
 
       <li><a href="#">3</a></li> 
 
       <li><a href="#">4</a></li> 
 
       <li><a href="#">5</a></li> 
 
       <li> 
 
        <a href="#" aria-label="Next"> 
 
         <span aria-hidden="true">&raquo;</span> 
 
        </a> 
 
       </li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 
    <div class="col-md-1"> 
 
     <span> 
 
      10 of 137 items 
 
     </span> 
 
    </div> 
 
</div>

Answer 2

你可以嘗試display: table-cell; vertical-align: middle;如果你不介意讓你的手有點髒。

div[class*="col"] { 
 
    width: 49%; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    vertical-align: top; 
 
} 
 

 
.col-md-1 span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-md-2"> 
 
     <nav aria-label="Page navigation"> 
 
      <ul class="pagination"> 
 
       <li> 
 
        <a href="#" aria-label="Previous"> 
 
         <span aria-hidden="true">&laquo;</span> 
 
        </a> 
 
       </li> 
 
       <li><a href="#">1</a></li> 
 
       <li><a href="#">2</a></li> 
 
       <li><a href="#">3</a></li> 
 
       <li><a href="#">4</a></li> 
 
       <li><a href="#">5</a></li> 
 
       <li> 
 
        <a href="#" aria-label="Next"> 
 
         <span aria-hidden="true">&raquo;</span> 
 
        </a> 
 
       </li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 
    <div class="col-md-1" style ="vertical-align: middle;"> 
 
     <span style="height: 70px;;"> 
 
      10 of 137 items 
 
     </span> 
 
    </div> 
 
</div>

Answer 3

集線高度和跨度的高度同樣會垂直對齊文本

<div class="row"> 
    <div class="col-md-2"> 
     <nav aria-label="Page navigation"> 
      <ul class="pagination"> 
       <li> 
        <a href="#" aria-label="Previous"> 
         <span aria-hidden="true">&laquo;</span> 
        </a> 
       </li> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
       <li><a href="#">5</a></li> 
       <li> 
        <a href="#" aria-label="Next"> 
         <span aria-hidden="true">&raquo;</span> 
        </a> 
       </li> 
      </ul> 
     </nav> 
    </div> 
    <div class="col-md-1" style ="vertical-align: middle;"> 
     <span style="height: 70px;line-height:70px; display: block;"> 
      10 of 137 items 
     </span> 
    </div> 
</div>