Margin: Auto not working in IE

E

9

16

URL: http://cyberbat.co.uk/test container margin: auto is not working, is there any other way to put it in the middle in IE.

EDIT: Check it again, the index.php was the wrong file, I replaced it with index.html .

Ertha answered 18/10, 2011 at 16:7 Comment(3)

Poor question. Show some HTML source, we don't want to have to go find it from your link... and put what in the middle exactly? – Atheist 18/10, 2011 at 16:11

You just need a container for .page that its text-align should be center. IE can't centralize a block-tag (like divs or uls) via margin. See the code below in answer – Llano 18/10, 2011 at 16:22

Link not working anymore. – Peisch 11/5, 2017 at 16:12

L

24

This is a bug in IE! You just need to create a holder for <div class="page"> and set its text-align to center

.page-holder{
    text-align:center;
}
.page{
    margin:0 auto;
}

<div class="page-holder">
    <div class="page">
    page content
    </div>
</div>

Llano answered 18/10, 2011 at 16:14 Comment(0)

G

10

Use this on parent container for stupid browsers:

text-align: center

Grainfield answered 18/10, 2011 at 16:10 Comment(0)

G

9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Your problem is define your file type and standards. if you add to this code to top of your file it will work!

Glottology answered 14/10, 2012 at 13:55 Comment(1)

I added HTML 5's <!DOCTYPE html>, now IE behaves as expected. 10x – Hypoploid 10/8, 2015 at 10:34

R

8

try using the following on the parent item.

display: flex;
align-items: center;

Republican answered 24/11, 2015 at 14:8 Comment(1)

Or display: flex on the parent and align-self: center on the child if you only want that one element vertically centered – Broncho 27/9, 2017 at 20:24

W

3

You have RAW php code because you didn't configure the server properly:

<?php
include('inc/settings.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Resolve that issue by applying PHP to *.html files and <?php include ?> won't show up literally. If I recall correctly, adjust this line in the .ini file to be:

AddType application/x-httpd-php .html .htm .php

Because this literal backend code is in front of the DOCTYPE, it causes quirks mode in IE and in quirks horizontal auto margins don't work properly.

You can go with the text-align:center on parent element, but that's a hack for IE and you should solve this properly by making IE render it in standards mode from my suggestion above.

Warfarin answered 18/10, 2011 at 16:11 Comment(0)

D

3

For IE, replace my-auto with align-self-center and BINGO. You can also write CSS for the same:

.center-container{
   align-self: center;
}

Dorice answered 24/10, 2019 at 13:37 Comment(1)

align-self is a flexbox property and will not work unless in a flexbox container. – Espinoza 24/10, 2019 at 13:52

M

2

Internet Explorer displays your website in quirks mode because of this bogus processing instruction at the top of markup:

<?php
include('inc/settings.php');
?>

Remove it; margin: auto works in IE6+. There's no need to do text-align: center or other unnecessary changes.

Mou answered 18/10, 2011 at 16:11 Comment(2)

Sorry, that was the php file. Check it again, I put the index.html file to replace the index.php file. – Ertha 18/10, 2011 at 16:15

@Ertha If I open the link you provided, I can still see <?php ... at the top of source (press Ctrl+U in your browser to display source). – Mou 18/10, 2011 at 16:18

T

1

Try adding a meta record to head:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Throve answered 19/12, 2016 at 14:31 Comment(1)

This actually worked better than all other mentioned methods for getting my page to display in IE11 the same way it does in Chrome. – Menander 30/12, 2016 at 20:19

D

0

You can download normalize.css (just google it) and link it to your project, now you can use smth like:

HTML:

    <main class="container></main>

CSS:

    .container {
      margin-left: auto;
      margin-right: auto;
      width: 600px;

Doily answered 22/1, 2019 at 10:39 Comment(0)

Recommended topics

Hot tags