How can I vertically center my bootstrap columns?

Question

Here's a link to a JSFiddle of my problem. I'm using a .center-y class to try to vertically center the text elements, but getting no results.

http://jsfiddle.net/2LKXQ/1/

.center-y {
vertical-align: center;
}

Answer 1

remove max-height and put top and bottom margin i hope this will helpful to you

 #WhatIsMasterPhoto {
       margin:25% auto;
        bottom: 10px;

    }

Answer 2

Check the updated jsfiddle - http://jsfiddle.net/chetangawai/2LKXQ/2/

<!-- What is Master Page -->
<div class="container-fluid" style="display: table;" id="WhatIsMastercontainer"><!--updated-->
    <div class="col-md-6 center-y" id="WhatIsMasterText" style="display: table-cell;
vertical-align: middle;"><!--updated-->
        <div class="container-fluid-text" , id="SubHeaderTextLeft">What is a Master?</div>
        <div class="container-fluid-text" , id="RegularTextLeft">Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text.
            <br>
            <br>Here's a bunch of test text. Here's a bunch of test text. Here's a bunch of test text.</div>
    </div>
    <div class="col-md-2 col-md-offset-2 center-text">
        <img id="WhatIsMasterPhoto" src="http://sisu.typepad.com/photos/uncategorized/2008/08/20/spongebob_yo.jpg">
    </div>
</div>