if you check my website with the browser Chrome you can see how the div called .bg-content works fine with this style:
.bg-content {
max-width: 605px;
height: 149px;
position: absolute;
top: 62px;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
But if you open my website with Internet Explorer 11 the div .bg-content is not centered, he is floating to left.
How can I fix this?
margin: auto; , it will not work. This is because by default the block-level elements such as a div, p, list, etc take up the full width of its parent element, and no space is left to adjust the element horizontally. So, the very first thing you need to check is whether you have set the width of the element or not.
The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
it doesn't work because the max-width;
Try this:
.bg-content {
width: 605px;
height: 149px;
position: absolute;
top: 62px;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
You should use
width: 100%;
in your .bg-content element
Example: IE11 max-width & margin auto fix
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