Here are some possible solutions for vertically aligning center:
Method - 1 - VIEW DEMO
To achieve vertical center alignment, set the line's height to match that of 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>
Method - 2 - VIEW DEMO
If you simulate table display behavior, vertical alignment can be achieved. Note that setting the height property is optional and for demonstration purposes only.
<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 - Method 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 - Method 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" style="display: table-cell; vertical-align: middle;">
<div id="play_title">PLAY THE MOVIE</div>
</div>
</div>
</div>
OR TRY - Method 4
<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>
For more on vertical alignment using display: table-cell, refer to these questions:
Question 1. Div table-cell vertical align not working
Question 2. Vertical-align middle with display table-cell not working on images
Method - 3
Try using a span instead of div for div#play_title, and apply CSS styles display:inline-block; and vertical-align:middle; 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>