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

Question

我正在使用引导程序构建一个响应式站点，并尝试创建一些按钮。 我找不到垂直对齐中间文本的方法。 这是我的代码：

<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>

[已编辑]

尝试 - 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>

看看其他关于 Vertical-align middle with display table-cell not working 的问题？？？

问题 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>