Dlaczego ten element div/img nie znajduje się w centrum IE8?

Mam bardzo prostą stronę trzymania, którą zbudowałem, centrując element div, kotwicę i obraz. Z jakiegoś powodu nie będzie centrum w IE8 (w obu trybach) i mam nadzieję, że ktoś może mi powiedzieć, dlaczego. Nie miałem okazji wypróbować tego w innych przeglądarkach IE. Próbowałem tego w Chrome i FF3, gdzie działa poprawnie.Dlaczego ten element div/img nie znajduje się w centrum IE8?

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #pageContainer {width:300px;margin:0 auto;text-align:center;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

Powiedziałem, że to było naprawdę proste. :)

Dziękuję

Brett

Źródło

2009-05-03 Brettski

w każdym razie to nie ma nic wspólnego z wersji IE. Działa to samo we wszystkich IE-s – DaDa

jego lepiej używać doctype, połowa błędów zostanie naprawiona – Mike

Czy naprawdę chcesz, aby Twoja strona działała w trybie dziwactwa?Twój HTML Centra porządku raz dodałem doctype aby wymusić tryb norm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 
<title>Welcome</title> 
<style>  
    #pageContainer {width:300px;margin:0 auto;text-align:center;}  
    #toLogo{border:none; } 
</style> 
</head> 

<body> 

<div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"> 
    <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div> 

</body> 
</html>

Źródło

2009-05-03 05:16:09

buit-oxa, bardzo interesująca odpowiedź. Dziękuję Ci. – Brettski

Doctype> tryb dziwactwa, dowolny dzień. Tryb quirks może się różnić w zależności od przeglądarki, a tryb standard jest prawie taki sam (tak, IE8 jest zgodny ze standardami!) Z wyjątkiem kilku drobnych różnic. +1 –

Szczerze mówiąc, nigdy wcześniej nie słyszałem o trybie dziwactwa, dziękuję bardzo za odpowiedź i naucz mnie trochę więcej o moim rzemiośle. – Brettski

Dodaj text-align:center do ciała. To powinno zrobić to w połączeniu z margin:0 auto na div.

Można wyśrodkować bez użycia text-align:center na ciele, zawijając całą zawartość strony w pojemniku o pełnej szerokości &, a następnie ustawiając na tym również text-align:center.

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #container {text-align:center;border:1px solid blue} 
    #pageContainer {width:300px; margin:0 auto; border:1px solid red} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
     </div> 
    </div> 
</body> 
</html>

(Dodałem container div). Tak naprawdę nic nie zmienia ... tylko dodatkowy div. Nadal potrzebujesz wszystkich tych samych właściwości css.

Źródło

2009-05-03 04:52:33 Bryan

To zrobiło centrum w IE8, ale nie rozumiem, dlaczego potrzebuję tego. Mam inne witryny, które używają marginesu: 0 auto; aby wyśrodkować zawierający element div. – Brettski

Stary wątek, ale podniosę tę odpowiedź (i TAKŻE powszechnie akceptowaną) po prostu dlatego, że to właśnie ta odpowiedź przypomniała mi, że umieszczam wyrównanie tekstu: centrum do ciała. ;-) –

Prawdopodobnie chcesz go zmienić na następujące:

<html> 
<head> 
<title>Welcome</title> 
<style> 
    body { text-align: center; } 
    #pageContainer {width:300px;margin:0 auto;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

text-align:center; zostanie przeniesiony do ciała. Jeśli chcesz umieścić inne wyrównane lewe treści w arkuszu div #pageContainer, dla tej klasy będziesz potrzebować text-align:left;. Jest to rozwiązanie, z którego korzystałem już na kilku stronach internetowych i wydaje się działać we wszystkich przeglądarkach (to jest to, czego Dreamweaver używa w swoich szablonach startowych).

Źródło

2009-05-03 04:56:50

Chrystus wie, dlaczego ktoś cię głosował, ponieważ to jest dokładnie to, w jaki sposób wyśrodkowujesz stronę. – wheresrhys

Ponieważ IE8 jest w rzeczywistości standardem zgodnym z tym poziomem, możesz rzeczywiście zastosować secyfikację i standardy. Właściwość text-align centruje tylko elementy śródliniowe, a nie na poziomie bloku, tak jak DIV. text-align: center; w takim przypadku wyśrodkuje tylko * tekst * wewnątrz ciała, a nie elementy kontenera. Jedyne, czego potrzebuje, to doctype, jak stwierdza powyższa odpowiedź. –

Margines auto po bokach elementu div pozostaw to przeglądarce, aby zdecydować, dokąd zmierza. Nic nie mówi przeglądarce, że div powinien być wyśrodkowany w ciele, lub w lewo lub w prawo. Więc to zależy od przeglądarki. Jeśli dodasz dyrektywę do ciała, twój problem zostanie rozwiązany.

<html> 
    <head> 
    <title>Welcome</title> 
    <style> 
     body { text-align: center;} 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

Dodałem granicę 1px do elementu div, dzięki czemu można było zobaczyć, co się dzieje lepiej.

Zostawiasz go przeglądarce, ponieważ jest w trybie dziwactwa. Aby usunąć tryb quirks dodać definicję doctype do góry, tak jak poniżej:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <title>Welcome</title> 
    <style> 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

Teraz będziesz mógł zobaczyć swoje 300 px centrum div na stronie.

Źródło

2009-05-03 05:02:24

Automatyczne poziome marginesy w połączeniu z ustawioną szerokością to właściwy sposób na wyśrodkowanie elementów poziomu bloku. Wspólna praktyka, spróbuj samemu :) –

DLA UŻYTKOWNIKÓW Blueprint To pojechaliśmy moje orzechy, aż znalazłem ten wpis: problem with ie8 and blueprint długie opowiadanie, w was HTML zmianę Kodeksu

<!--[if IE]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

dla

<!--[if lt IE 8]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

Pozdrowienia Alex

Źródło

2009-09-11 23:24:26

-1

Działa to dla mnie na IE6,7,8, FF 3.6.3:

#container 
    { 
     width:100%; 
    } 

    #centered 
    { 
     width:350px; 
     margin:0 auto; 
    }

<div id="container"> 
     <div id="centered">content</div> 
    </div>

Źródło

2010-04-06 16:16:19 ben

Nie działa ... – Philippe

Dlaczego ten element div/img nie znajduje się w centrum IE8?

Odpowiedz

Powiązane problemy