I'm trying have have two rows of two buttons stacked on top of each other like below:
[button][button]
[button][button]
These buttons need to be in the center of the screen and evenly take up the space below the picture. I am very close with the code below but cannot get them centered correctly. How would I change my code to accomplish this:
[ Image ]
[button][button]
[button][button]
Also I feel like I'm making this overly complicated. Is there an easier way to stack buttons evenly in the center? Thank you!
/*Four Button Set-up*/
.buttonAnswerLeft{
width: 25%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
}
.buttonAnswerRight{
width: 25%;
max-width: 800px;
font-size: 25px;
display: inline-block;
text-align:center;
float: left;
} <img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>
<div class="button-box col-lg-12 col-xs-12">
<button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info '> Absolutely sure, I'm not going.</button>
<button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info '> Pretty sure I'm not going. </button>
</div>
<div class="button-box col-lg-12 col-xs-12">
<button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info '> It's doubtful. </button>
<button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info '> It's a maybe. </button>
</div>
</div>
</div>I know you have accepted an answer already but it doesn't seem to answer your question
First, whatever contains the following code must have text-align:center on it (in the example bootply, I have put this on the body tag).
Second, I have assumed you are using bootstrap because of the classes - this makes no difference but that's why I have done the example in bootply.
Third, wrap all elements in an inline element that has a max width of 100%;
Fourth, make image block and max-width of 100%
4th as your buttons seem to be inline-block elements, you can add box-sizing and 50% width to them and then comment out the space inbetween, then you should achieve what you are after
body {
text-align: center;
}
.image-container {
display: inline-block;
max-width: 100%;
}
.image-container .image {
display: block;
max-width: 100%;
}
button {
width: 50%;
box-sizing: border-box;
}<div class="image-container">
<img class="image center-block" id="image6" src="http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg">
<div class="button-box col-lg-12 col-xs-12"><!--
--><button id="" type="button" class="buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info "> Absolutely sure, I'm not going.</button><!--
--><button id="" type="button" class="buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info "> Pretty sure I'm not going. </button><!--
--></div>
<div class="button-box col-lg-12 col-xs-12"><!--
--><button id="" type="button" class="buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info "> It's doubtful. </button><!--
--><button id="" type="button" class="buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info "> It's a maybe. </button><!--
--></div>
</div>The above is fully responsive up to the max width of the image
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments