i've been trying to solve this for quite some time now and i can't find a simple solution to this.
I have a grid of two sides (col-sm-6), one side with text and the other with button. I am not able to align those two in the center vertically and horizontally.
I was able to align text by using line-heigh, but not the button. Well i did managed to get button in the centre of the col using margin top, but im not sure if that is correct? Also if i use margin top or not, when i test it for mobile, the button jumps out of the section/colored div with the background.
So what i want. Firstly both adjusted in the center of the section on normal screen, and when you resize for mobile, each in seperate rows but still inside the colored div/section part.
Please help me find a solution.
html
<div class="col-md-6 col-sm-12 text-center">
<h3>Interested in what we have to offer?</h3>
</div>
<div class="col-md-6 col-sm-12 text-center">
<button type="button" class="btn btn-primary btn-lg" id="bannerbtn">Contact us now</button>
css
.banner-section{
height: 150px;
background-color: #212529;
}
.banner-section h3{
float:right;
line-height: 150px;
color: #fff;
font-size:25px;
}
#bannerbtn
{
float:left;
background-color: #6d6e71; /*background:#6d6e71 */
border-color: #fff;
}
https://jsfiddle.net/sd0jnq9p/7/
Thank you
