CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3vertical-alignment
GʀᴜᴍᴘʏCᴀᴛ
GʀᴜᴍᴘʏCᴀᴛ

Reputation: 8908

Vertically center Bootstrap 3 button within column

I've spent some time trying to figure out why my button will not center vertically inside of a column I figured I would ask here because I think I'm missing something, the HTML:

<div class="container">
    <div class="row">
        <div class="sellthem">
            <div class="col-sm-8 col-sm-offset-1">
                <div class="sellContent">
                    <h1 class="sellHeader">Bacon ipsum dolor amet fatback turkey filet mignon</h1>
                    <h4 class="sellText">Bacon ipsum dolor amet fatback turkey filet mignon ham T-bone alcatra drumstick tenderloin strip steak meatball. Rump picanha chicken beef sausage tri-tip</h4>
                </div>
            </div>
            <div class="col-sm-2 sendThem">
                <button type="button" class="btn btn-lg btn-block">Sign Up</button>
            </div>  
        </div>
    </div>
</div>

The text in the h1 and h4 tags will change so the height could change and I would like to center the button within the column col-sm-2. When I researched the Bootstrap documentation under buttons there isn't anything mentioned regarding vertically centering.

When I searched SO I run across How can I center vertically a bootstrap class button? but it uses a forced height of 200px, answer:

div#container {
    height: 200px; 
    border: solid 2px green; text-align:center;
    line-height:200px;
}
input#verticalButton {
     vertical-align: middle;
}

Further research, How to center buttons in Twitter Bootstrap 3? suggests center-block but that is for horizontal centering and I want vertical centering.

Further down the rabbit hole I ran across button vertical align bootstrap but when I try:

HTML:

<div class="sendThem">
    <div class="col-sm-2">
        <button type="button" class="btn btn-lg btn-block">Sign Up</button>
    </div>
</div>

CSS:

.sendThem {
    display:table;
}
.sendThem .col-sm-2 {
    display:table-cell;
    vertical-align:middle;
    float:none;    
}

my result is the same and that is a button at the top. I thought, per reading somewhere that there could be an issue caused by the column but I can't seem to locate that documentation.

What is the proper way to center the button vertically with HTML and CSS so I can get something like this:

enter image description here

I wasn't planning to use a set height, and anything below col-sm was going to be a full width centered button. Here is a Bootply trying to center the button vertically.

Upvotes: 4

Views: 4788

Answers (1)

Mauro Gava
Mauro Gava

Reputation: 511

Well You can use this code:

.sellthem {
    display: flex;
    align-items: center;
}

@media only screen and (max-width : 768px) {
    .sellthem {
        display: block;
    }
}

Take in account that this is more like a hack (you're overwriting its code base) so it isn't the best way to solve this issue since Bootstrap has not support for vertical align in its grid system (not sure but I think that in the new version they will have vertical alignment).

Note: please check this solution in all browser you are supporting.

Two possible solution could be use another grid system based in flexbox or just write the styles for this case scenario for your own.

UPDATE

You can write just the following and it should work the same:

@media only screen and (min-width : 768px) {
    .sellthem {
        display: flex;
        align-items: center;
    }
}

Upvotes: 3

Related Questions