Menu
New to everything web-programming wise.
I'm trying to vertically align the two wrapper divs so that they are in the middle of the page, irrespective of the browser. The website can be found here: www.armedwithreason.com/massshooting
I've looked up dozens of tutorials on this very question, and cannot get anything to work. Any ideas?
663
To align two <div> elements vertically in Bootstrap 3, you can try using the CSS Flexible Box Layout. In the example below, we display the needed row as a flex container box with the CSS display property and then, align the flex-items (columns) vertically with the align-items property.
Vertically centering div items inside another div Just set the container to display:table and then the inner items to display:table-cell . Set a height on the container, and then set vertical-align:middle on the inner items. This has broad compatibility back as far as the days of IE9.
The vertical-align property in CSS controls how elements set next to each other on a line are lined up. In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span> , <img> ) or inline-block (e.g. as set by the display property) elements.
You've set width and height on those two div, then you can use this kind of code :
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -170px;
margin-left: -300px;
}
.wrapper2 {
position: absolute;
top: 50%;
left: 50%;
margin-top: 150px;
margin-left: -300px;
}
With top: 50%; left: 50%, you put the div's top-left corner in the middle, then you ajust its position with /positive/negative margins.
JsFiddle (a basic one with your own style)
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
