Menu
Is it possible to an center a div horizontally, if that div is also absolute? The following works great in Chrome/Safari/Firefox, but in IE8 it sits to the far left:
.holder-answers {
position: absolute;
display: none;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 200px;
width: 501px;
}
666
using a "text-align: center;" and a "left: 0; right: 0;" will allow you to absolute position a div while keeping it horizontally centered.
If you want to center something horizontally in CSS you can do it just by, using the text-align: center; (when working with inline elements) or margin: 0 auto; (when working with block element).
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
Can you not try:
.holder-answers {
position: absolute;
top: 200px;
left: 50%;
width: 501px;
margin-left: -250px; /* half the box width */
}
This method should work in all browsers.
87
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
