All geek questions in one place

Margin: Auto does not work in IE

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

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

+11
source share
8 answers

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>
+17
source 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

+9
source

Use this in the parent container for dumb browsers:

 text-align: center
+8
source

try using the following in the parent element.

 display: flex; align-items: center;
+5
source

You have PHP RAW code because you did not 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">

To solve this problem, applying PHP to * .html and <?php include ?> Files will not be displayed literally. If I remember correctly, configure this line in the .ini file as follows:

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

Since this literal backend code is before DOCTYPE, it calls quirks in IE, and in quirks horizontal auto fields do not work properly.

You can go from text-align: center to the parent element, but this is a hack for IE, and you have to solve it correctly by making IE render in standard mode from my suggestion above.

+3
source

Internet Explorer displays your site in quirks mode because of this command to process fictions at the top of the markup:

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

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

+2
source

Try adding a meta entry to head :

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

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

HTML:

  <main class="container></main>

CSS:

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

Source: https://habr.com/ru/post/899538/

More articles:


All Articles