创建具有垂直对齐中心的响应按钮

Question

我正在使用bootstrap构建响应式网站，尝试创建一些按钮。 我无法找到一种在中间垂直对齐文本的方法。 这是我的代码：

<div class="play col-xs-24 visible-xs-block">
   <div class="row movie_button">
      <div class="play_button inline_blocks col-xs-4">
         <img class="button_images movie_img_button" src="../images/btn.png">
      </div>
      <div class="col-xs-20 button_link ">
         <div id="play_title">PLAY THE MOVIE</div>
      </div>
   </div>
</div>

我尝试使用display: table-cell，但它没有用。

Answer 1

垂直对齐中心的可能解决方案：

解决方案 - 1 - DEMO

将线条的高度设置为与包含框元素相同的高度。

<div class="col-xs-20 button_link" style="height: 50px;">
    <div id="play_title" style="line-height: 50px; text-align:center;">PLAY THE MOVIE</div>
</div>

---

解决方案 - 2 - DEMO

模拟表格显示行为，因为表格支持垂直对齐:(注意：你不需要在你的情况下设置height，它只适用于演示）

<div class="col-xs-20 button_link" style="height: 50px; display: table;">
    <div id="play_title" style="display: table-cell; vertical-align: middle; text-align:center;">PLAY THE MOVIE</div>
</div>

<强> [EDITED]

TRY - 1 （对于解决方案 - 2）

<div class="play col-xs-24 visible-xs-block">
   <div class="row movie_button">
      <div class="play_button inline_blocks col-xs-4">
         <img class="button_images movie_img_button" src="../images/btn.png">
      </div>
      <div class="col-xs-20 button_link" style="display: table;">
         <div id="play_title" style="display: table-cell; vertical-align: middle;">PLAY THE MOVIE</div>
      </div>
   </div>
</div>

或尝试 - 2

<div class="play col-xs-24 visible-xs-block">
   <div class="row movie_button" style="display: table;">
      <div class="play_button inline_blocks col-xs-4">
         <img class="button_images movie_img_button" src="../images/btn.png">
      </div>
      <div class="col-xs-20 button_link" style="display: table-cell; vertical-align: middle;">
         <div id="play_title">PLAY THE MOVIE</div>
      </div>
   </div>
</div>

或尝试 - 3

<div class="play col-xs-24 visible-xs-block">
   <div class="row movie_button" style="display: table;">
      <div class="play_button inline_blocks col-xs-4">
         <img class="button_images movie_img_button" src="../images/btn.png">
      </div>
      <div class="col-xs-20 button_link">
         <div id="play_title" style="display: table-cell; vertical-align: middle;">PLAY THE MOVIE</div>
      </div>
   </div>
</div>

查看有关垂直对齐中间的其他问题，显示表格单元格不起作用???

问题1。 Div table-cell vertical align not working

问题2。 Vertical-align middle with display table-cell not working on images

---

解决方案 - 3

对span使用div代替div#play_title，并将CSS样式display:inline-block; vertical-align:middle;和display:inline-block;添加到包含的框元素中。

<div class="play col-xs-24 visible-xs-block">
   <div class="row movie_button">
      <div class="play_button inline_blocks col-xs-4">
         <img class="button_images movie_img_button" src="../images/btn.png">
      </div>
      <div class="col-xs-20 button_link" style="display:inline-block;">
         <span id="play_title" style="display:inline-block; vertical-align:middle;">PLAY THE MOVIE</span>
      </div>
   </div>
</div>