0

I'm building a responsive site using bootstrap, trying to create some buttons. I can't find a way to vertical align the text in the middle. This is my code:

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

I tried using display: table-cell but it didn't worked.

This is what i want:

Anonymous
  • 10,002
  • 3
  • 23
  • 39
user2587454
  • 903
  • 1
  • 19
  • 44

1 Answers1

1

Possible solutions to vertical-align center:

Solution - 1 - DEMO

Set the line's height to the same height as the containing box element.

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

Solution - 2 - DEMO

Simulate table display behavior, since tables support vertical alignment: (Note: You don't need to set the height in your case, It's only for Demo)

<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 (For Solution - 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>

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

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

Look at other Questions about Vertical-align middle with display table-cell not working???

Question 1. Div table-cell vertical align not working

Question 2. Vertical-align middle with display table-cell not working on images

Solution - 3

Use span instead of div for div#play_title and add CSS Style display:inline-block; vertical-align:middle; and display:inline-block; to the containing box element.

<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>
Community
  • 1
  • 1
Anonymous
  • 10,002
  • 3
  • 23
  • 39