So FYI - I resolved this issue myself. The answer at
this website which talks about best practices for webpage development. Here's the part that was helpful...
center
The ancient <CENTER> tag can safely retire, too. CSS is quite capable of centering text and blocks of content, though there's one catch.
To center the text in div.text you do:
div.text {
text-align: center;
}
Centering entire blocks is somewhat trickier. If you want to center the entire div.text, the official CSS way is:
div.text {
margin-left: auto;
margin-right: auto;
}
auto means: “as much as you need.” The <div> takes as much margin as it needs and equally divides it between left and right. As a result it is centered.
Unfortunately the auto value does not work in Explorer for Windows. Instead, you must use text-align on a block containing div.text:
div.container {
text-align: center;
}
div.text {
margin-left: auto;
margin-right: auto;
text-align: left; /* overrule inheritance */
}
<div class="container">
<div class="text">
This entire block is centered
</div>
</div>
This use of text-align is not quite standards-compatible, but it's the only way to make Explorer for Windows behave. And yes, it's one of the very few cases where divitis and classitis are good for your page.
2
