Margin: Auto not working in IE

Question

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 .

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? — musefan, Oct 18 '11 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 `div`s or `ul`s) via `margin`. See the code below in answer — amiry jd, Oct 18 '11 at 16:22

score 24 · Answer 1 · edited Nov 14 '16 at 01:30

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>

edited Nov 14 '16 at 01:30

Abrar Jahin

13,970
24
112
161

answered Oct 18 '11 at 16:14

amiry jd

27,021
30
116
215

score 10 · Answer 2 · answered Oct 18 '11 at 16:10

10

Use this on parent container for stupid browsers:

text-align: center

answered Oct 18 '11 at 16:10

Jan Tojnar

5,306
3
29
49

score 9 · Answer 3 · edited Oct 14 '12 at 14:01

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!

edited Oct 14 '12 at 14:01

Habibillah

27,347
5
36
56

answered Oct 14 '12 at 13:55

Coşkun GEMİCİ

91
1
1

1

I added HTML 5's ` `, now IE behaves as expected. 10x – Pavel Vlasov Aug 10 '15 at 10:34

score 8 · Answer 4 · answered Nov 24 '15 at 14:08

8

try using the following on the parent item.

display: flex;
align-items: center;

answered Nov 24 '15 at 14:08

Daryl H

624
8
8

4

Or display: flex on the parent and align-self: center on the child if you only want that one element vertically centered – RustyToms Sep 27 '17 at 20:24

score 3 · Answer 5 · answered Oct 24 '19 at 13:37

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;
}

answered Oct 24 '19 at 13:37

Sudhanshu Singh

31
1

1

`align-self` is a flexbox property and will not work unless in a flexbox container. – Quangdao Nguyen Oct 24 '19 at 13:52

score 3 · Answer 6 · answered Oct 18 '11 at 16:11

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.

score 2 · Answer 7 · answered Oct 18 '11 at 16:11

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.

answered Oct 18 '11 at 16:11

duri

14,991
3
44
49

Sorry, that was the php file. Check it again, I put the index.html file to replace the index.php file. – Lewes Oct 18 '11 at 16:15
@Lewes If I open the link you provided, I can still see ` – duri Oct 18 '11 at 16:18

score 1 · Answer 8 · edited Dec 19 '16 at 15:26

1

Try adding a meta record to head:

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

edited Dec 19 '16 at 15:26

Jordan

4,424
2
18
32

answered Dec 19 '16 at 14:31

tulsluper

1,688
1
13
8

This actually worked better than all other mentioned methods for getting my page to display in IE11 the same way it does in Chrome. – Rawrcasm Dec 30 '16 at 20:19

score 0 · Answer 9 · edited Jan 22 '19 at 11:33

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;

edited Jan 22 '19 at 11:33

Anastasios Selmani

3,579
3
32
48

answered Jan 22 '19 at 10:39

n4ks

138
2
10

Margin: Auto not working in IE

9 Answers9

Linked