How can I vertically center my bootstrap columns?

扶醉桌前 提交于 2019-12-12 05:27:32

问题


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

回答1:


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

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

    }



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


来源:https://stackoverflow.com/questions/22471973/how-can-i-vertically-center-my-bootstrap-columns

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!