Meine Organisation hat eine ältere Version von IE, daher hat der Code beim ersten Versuch nicht funktioniert. Das Hinzufügen des Body-Elements hat perfekt funktioniert!
Ich weiß, das ist alt, aber Sie brauchen wirklich kein text-align: center; es sei denn, Sie machen etwas anderes falsch.
IE unterstützt "margin:auto;", wenn für das Element eine Breite festgelegt ist und ein gültiger Doctype vorhanden ist. Ohne einen gültigen Doctype wechselt IE in den "Quirks-Modus", in dem automatische Ränder fehlschlagen.
Ich weiß, dass dieser Beitrag 2009 geschrieben wurde, aber Gott segne Sie!!! Ich musste mit einem Drittanbieter-Dienst arbeiten, bei dem ich den Header und Footer zu deren Inhalten aktualisieren kann, und nur in IE war mein Seiteninhalt linksbündig.
Das Upgrade von IE ist für viele keine Option. Viele Organisationen sperren ihre Systeme, sodass keine Software aktualisiert und keine neue Software installiert werden kann. Korrekturen für IE müssen weiterhin enthalten sein.
Die fortlaufende Unterstützung von IE6/7 durch Hacks und Workarounds schadet der Webindustrie… man fügt keine Kompatibilitätszeugnisse für 10 Jahre altes Mozilla hinzu… oder?
@Alexander: Für einige Entwickler ist es nicht möglich, die Unterstützung für IE6/7 einzustellen. Ich bin der Frontend-Entwickler für eine E-Commerce-Website, die dank Bildung und Unternehmen immer noch einen zweistelligen Prozentsatz an IE6-Nutzern hat. Es ist eine traurige Realität, aber ich muss trotzdem IE-Hacks in meinen Code aufnehmen.
Hallo Ed… danke für dieses Tutorial……! genau das, womit ich früher zu kämpfen hatte, als ich mein Design in Photoshop geschnitten und auf eine Webseite exportiert habe, dann war die gesamte Seite auf der linken Seite der Seite vertikal ausgerichtet, also denke ich, dass das mit diesem Code nicht passieren wird, richtig………..?
Text-align center sollte niemals zur Positionierung eines Objekts verwendet werden. Das Nullsetzen meiner Ränder und Abstände mit einem Platzhalter ist ebenfalls eine schlechte Praxis. Ich würde Eric Meyers CSS-Reset empfehlen. Wenn margin: 0 auto Probleme verursacht, verwenden Sie
Wenn Sie absolute Positionierung verwenden und das Browserfenster kleiner als der Inhalt ist, wird der Inhalt auf der linken Seite des Bildschirms ausgeblendet. Versuchen Sie, IE auf einem Gerät mit kleinem Bildschirm wie einem Geldautomaten zu starten, um dies herauszufinden.
Ich habe in der Vergangenheit zwei Hauptmethoden dafür verwendet, aber ich habe die letztere wahrscheinlich öfter verwendet… Methode #1, leichtgewichtig. . .
html, body {
text-align:center;
width:100%;
height:100%;
}
/* original thread code */
#page-wrap {etc..}
und Methode #2, die alle Probleme überschreiben sollte…
html, body, {
text-align:center;
width:100%;
height:100%;
}
#fullpage-div /* usually named container or wrapper */ {
text-align:center;
width:100%;
height:100%;
}
/* of course you'd add that div to the html, body style to compress your code, I included it separately here to illustrate the additional container. */
/* then add the margin 0 auto container which in this case is the original thread code */
#page-wrap {etc..}
Ich habe den folgenden Code für mein HTML und mein CSS-Stylesheet verwendet, und er hat wie ein Zauber funktioniert. Meine Seite hatte tatsächlich eine Breite von 1000, also habe ich sie einfach von 800 auf 1000 geändert, und bei margin-left -400 habe ich sie zu -500 geändert, wobei ich dem folgenden Codeformat gefolgt bin.
Für mein CSS-Stylesheet habe ich den folgenden Code hinzugefügt
Cindy, ich habe viel gelitten, um die Lösung für meine Website zu finden. Vielen Dank für Ihre Anleitung. Es scheint, dass nichts anderes für mich gut funktioniert hat, außer Ihrem HTML-Code. Ich weiß das zu schätzen. Mit freundlichen Grüßen, Roberto
Ich habe eine Div mit einer Breite von 1000px, und innerhalb der 1000px Div habe ich eine weitere kleine Div mit einer Breite von 300px, ich muss diese 300px Div genau in der Mitte der 1000px Div platzieren.
Es hängt immer davon ab, welches CMS wir verwenden. Ich hatte viele Probleme mit alten CMS, die diese Option nicht hatten, aber WordPress und Joomla sind einfach zu bedienen.
für diese Art von Problemen müssen Sie display:table-cell für diese spezielle Haupt-Div festlegen und vertical-align:middle machen, dann wird es automatisch genau in der Mitte angezeigt.
Ich verwende den Code page-wrap {position: absolute;left: 50%;width: 970px;margin-left: -485px;}
funktioniert gut in Browsern, aber bemerkte, dass ich Probleme habe, wenn ich auf einem Mobiltelefon ansehe – beim Scrollen verschwindet die linke Navigation für etwa 30-40px, während die rechte einwandfrei ist.
Ich hatte dasselbe Problem, und es stellt sich heraus, dass der Grund ziemlich einfach ist. Die beste Methode, eine Website zu zentrieren, ist die Verwendung von
#page-wrap{width: 970px; margin: 0 auto; }
Aber das funktioniert oft nicht. Also mussten Sie verwenden
Was auf breiten Bildschirmen funktioniert, aber auf schmalen Bildschirmen (z.B. Mobilgeräten) schneidet es den linken Rand ab. Das Problem bei der Verwendung von "margin: 0 auto" ist, dass es mit verschiedenen "position:absolute"-Befehlen kollidiert. Also sollte das funktionieren
Der Trick ist, den "top"-Teil in HTML als separates DIV zu definieren. Z.B.
<div id="new2" style="position:absolute;top:188px;"> <div id="fullcontent"> [Rest der Seite] </div> [vergessen Sie nicht, das neue Div zu schließen!]
Definieren Sie dann "fullcontent" in der CSS-Datei ohne "top", z.B. #fullcontent {position:absolute; left:190px;width:770px;z-index:20}
Das sollte funktionieren. Einige andere Teile des HTML sind möglicherweise ebenfalls als "absolute" definiert, sodass sie zurückbleiben: versuchen Sie dasselbe. Wenn etwas immer noch nicht funktioniert, experimentieren Sie mit "position:relative" innerhalb des "position:absolute"-Divs. Wenn etwas IMMER NOCH nicht funktioniert, prüfen Sie, ob die gesamte Seitenbreite doppelt festgelegt ist: z.B. "fullcontent" definiert die Seite als Breite: 970px (oder was auch immer), und ein Element innerhalb dieses Wrappers tut dies ebenfalls, was den Browser verwirren und viel Platz auf der rechten Seite lassen könnte.
Ich hoffe, das hilft. Ich bin KEIN Experte, kann also keine Folgefragen beantworten, hatte aber das gleiche Problem und das schien für mich zu funktionieren. Ich weiß, wie frustrierend es ist, wenn alle Tech-Seiten sagen "machen Sie das, es ist einfach" und Sie den Code genau kopieren und er NICHT funktioniert.
Ich brauche eine Lösung, wie man Text zentriert, wenn wir ein responsives Design haben. Meine Website wird sich auf RD ändern und ich habe sie getestet, aber nicht mit 100% gelösten Problemen. Danke
genau das, womit ich früher zu kämpfen hatte, als ich mein Design in Photoshop geschnitten und auf eine Webseite exportiert habe, dann war die gesamte Seite auf der linken Seite der Seite vertikal ausgerichtet, also denke ich, dass das mit diesem Code nicht passieren wird, richtig………..?
Hallo, ich bin neu in HTML und CSS… Ich habe viel über Flexbox gehört… und sehe hier eine Möglichkeit, die ganze Seite zu zentrieren, alter Stil… aber ist es nicht besser, die gesamte Website mit Flexbox zu zentrieren?
Ich habe ein Problem, die Website ist komplett zentriert und ich habe keine Probleme, sobald ich die Website hochlade, funktioniert die Vorschau, aber beim Aufrufen der URL wird sie linksbündig ausgerichtet, bitte helfen Sie, es macht mich verrückt.
Wie mache ich das, wenn ich einen Hintergrund für einen Abschnitt haben möchte, der sich außerhalb des page-wrap befindet? Ist es gute Praxis, den gesamten Inhalt eines Abschnitts in einen Container zu legen? Und im Hinblick auf Responsivität, wie wäre es mit max-width anstelle von width?
Sie müssen auch Folgendes tun: `
Da IE automatisch Ränder nicht immer anwendet.
Danke!
Meine Organisation hat eine ältere Version von IE, daher hat der Code beim ersten Versuch nicht funktioniert. Das Hinzufügen des Body-Elements hat perfekt funktioniert!
Ich weiß, das ist alt, aber Sie brauchen wirklich kein text-align: center; es sei denn, Sie machen etwas anderes falsch.
IE unterstützt "margin:auto;", wenn für das Element eine Breite festgelegt ist und ein gültiger Doctype vorhanden ist. Ohne einen gültigen Doctype wechselt IE in den "Quirks-Modus", in dem automatische Ränder fehlschlagen.
Ich weiß, dass dieser Beitrag 2009 geschrieben wurde, aber Gott segne Sie!!! Ich musste mit einem Drittanbieter-Dienst arbeiten, bei dem ich den Header und Footer zu deren Inhalten aktualisieren kann, und nur in IE war mein Seiteninhalt linksbündig.
Danke!
gute Sache.
fantastisch.
aber wie macht man ein Untermenü in HTML mit CSS.
Bitte helfen Sie mir.
Ausgezeichnete Antwort, danke
@Eddie Monge
IE ist nicht in Ordnung…
Aktualisieren Sie IE oder verwenden Sie Mozilla…
Das Upgrade von IE ist für viele keine Option. Viele Organisationen sperren ihre Systeme, sodass keine Software aktualisiert und keine neue Software installiert werden kann. Korrekturen für IE müssen weiterhin enthalten sein.
Die fortlaufende Unterstützung von IE6/7 durch Hacks und Workarounds schadet der Webindustrie… man fügt keine Kompatibilitätszeugnisse für 10 Jahre altes Mozilla hinzu… oder?
@Alexander: Für einige Entwickler ist es nicht möglich, die Unterstützung für IE6/7 einzustellen. Ich bin der Frontend-Entwickler für eine E-Commerce-Website, die dank Bildung und Unternehmen immer noch einen zweistelligen Prozentsatz an IE6-Nutzern hat. Es ist eine traurige Realität, aber ich muss trotzdem IE-Hacks in meinen Code aufnehmen.
Für den IE versuchen Sie es mal so
Absolute Positionierung ist keine gute Lösung für komplizierte Websites. Der Haupt-Snippet + (mittig ausgerichteter Body) ist die beste Lösung.
Diese Lösung hat mein Formular-Ausrichtungsproblem gelöst. Danke.
Sie können auch die verwenden
<pre>
<center>
</pre>
Tag am Anfang der Seite.
Machen Sie es so
#page-wrap {
width: 800px;
text-align: center;
margin: 0 auto;
}
*{
margin:0px;
padding:0px;
}
Körper {
text-align:center; /* das ist gut */
}
#page-wrap {
width: 800px;
text-align:left;
margin: 0 auto;
}
Sie können den folgenden Code verwenden, er läuft in allen Browsern ordnungsgemäß.
Ashish, ich kann deinen Code nicht sehen!
Vielen Dank… habe es sortiert, es fehlte nur das Wort auto!!!
Danke fürs Teilen, helft uns weiter!
sehr hilfreich, danke fürs Teilen Eddie
Hallo Ed… danke für dieses Tutorial……!
genau das, womit ich früher zu kämpfen hatte, als ich mein Design in Photoshop geschnitten und auf eine Webseite exportiert habe, dann war die gesamte Seite auf der linken Seite der Seite vertikal ausgerichtet, also denke ich, dass das mit diesem Code nicht passieren wird, richtig………..?
in alten IEs einfach doctype als erstes Seitenelement verwenden, z.B.
…
und margin:auto wird funktionieren
Tolles Tutorial für Noobs (ich bin einer der besten Noobs!)
Ich habe es geschafft, danke Chris!
Liebe CSS, gibt es eine Anleitung, um mehr zu lernen???
Erstaunliche Inhalte/Beiträge/Tutorials auf dieser Website, du rockst Mann total!
Text-align center sollte niemals zur Positionierung eines Objekts verwendet werden. Das Nullsetzen meiner Ränder und Abstände mit einem Platzhalter ist ebenfalls eine schlechte Praxis. Ich würde Eric Meyers CSS-Reset empfehlen. Wenn margin: 0 auto Probleme verursacht, verwenden Sie
#page-wrap {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}
Das war sinnvoll und hat bei mir einwandfrei funktioniert. Ich musste auch die Textausrichtung im Body-Selektor-CSS nicht ändern. Danke Bob.
Wenn Sie absolute Positionierung verwenden und das Browserfenster kleiner als der Inhalt ist, wird der Inhalt auf der linken Seite des Bildschirms ausgeblendet. Versuchen Sie, IE auf einem Gerät mit kleinem Bildschirm wie einem Geldautomaten zu starten, um dies herauszufinden.
und erledigt
Das Tutorial ist korrekt gemacht, Leute! Denken Sie daran, Ihren DOCTYPE korrekt einzustellen.
Das Beste wäre zu verwenden..
!DOCTYPE html
Ich habe in der Vergangenheit zwei Hauptmethoden dafür verwendet, aber ich habe die letztere wahrscheinlich öfter verwendet… Methode #1, leichtgewichtig. . .
und Methode #2, die alle Probleme überschreiben sollte…
Was denkst du?
wo kann ich mehr lernen???
Ich habe eine Website, die in WordPress erstellt wurde. Ist dieser Code dafür geeignet?
*{padding: 0; margin: 0 auto;}
body{
text-align: center;
}
#page-wrap{
width: 800px;
position: relative;
text-align: left;
}
#page-wrap
{
width: 800px;
margin: auto;
}
Versuche mit margin: 0 auto; zu arbeiten, aber ich scheitere immer :(
Welt von Internet Explorer 6 wegbewegen -> http://www.ie6countdown.com/
{width:960; margin:0 auto;}
heute die beste Technik
Ich habe den folgenden Code für mein HTML und mein CSS-Stylesheet verwendet, und er hat wie ein Zauber funktioniert. Meine Seite hatte tatsächlich eine Breite von 1000, also habe ich sie einfach von 800 auf 1000 geändert, und bei margin-left -400 habe ich sie zu -500 geändert, wobei ich dem folgenden Codeformat gefolgt bin.
Für mein CSS-Stylesheet habe ich den folgenden Code hinzugefügt
page-wrap {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}
Cindy, ich habe viel gelitten, um die Lösung für meine Website zu finden. Vielen Dank für Ihre Anleitung. Es scheint, dass nichts anderes für mich gut funktioniert hat, außer Ihrem HTML-Code. Ich weiß das zu schätzen. Mit freundlichen Grüßen, Roberto
Danke für das Skript. Das funktioniert für mich. Ich ändere das CSS, dann kann ich die Website mit 1000px zentriert machen.
Ich verwende Flexbox für das Webdesign und ich kann keine Breite in Flexbox verwenden, also was soll ich in CSS tun, um den Body zu zentrieren?
Hallo, ich brauche eine Lösung für ein Szenario
Ich habe eine Div mit einer Breite von 1000px,
und innerhalb der 1000px Div habe ich eine weitere kleine Div mit einer Breite von 300px, ich muss diese 300px Div genau in der Mitte der 1000px Div platzieren.
Kann mir jemand mit einem Beispiel helfen?
vielleicht verwenden Sie diesen Code in der Haupt-Div
{
margin: 0 auto;
padding:0;
}
Es hängt immer davon ab, welches CMS wir verwenden. Ich hatte viele Probleme mit alten CMS, die diese Option nicht hatten, aber WordPress und Joomla sind einfach zu bedienen.
für diese Art von Problemen müssen Sie display:table-cell für diese spezielle Haupt-Div festlegen und vertical-align:middle machen, dann wird es automatisch genau in der Mitte angezeigt.
Ich verwende den Code
page-wrap {position: absolute;left: 50%;width: 970px;margin-left: -485px;}
funktioniert gut in Browsern, aber bemerkte, dass ich Probleme habe, wenn ich auf einem Mobiltelefon ansehe – beim Scrollen verschwindet die linke Navigation für etwa 30-40px, während die rechte einwandfrei ist.
Hatte jemand sonst noch Probleme?
Die Website ist http://www.teddybearfriends.co.uk/, wenn jemand einen Blick darauf werfen möchte.
Kevin
Ich hatte dasselbe Problem, und es stellt sich heraus, dass der Grund ziemlich einfach ist. Die beste Methode, eine Website zu zentrieren, ist die Verwendung von
#page-wrap{width: 970px; margin: 0 auto; }Aber das funktioniert oft nicht. Also mussten Sie verwenden
#page-wrap {width:970px; position:absolute;left:50%;margin-left:-485px;}Was auf breiten Bildschirmen funktioniert, aber auf schmalen Bildschirmen (z.B. Mobilgeräten) schneidet es den linken Rand ab. Das Problem bei der Verwendung von "margin: 0 auto" ist, dass es mit verschiedenen "position:absolute"-Befehlen kollidiert. Also sollte das funktionieren
Derzeit sagt Ihre HTML-Seite
<div id="fullcontent">und definiert "fullcontent" in CSS als
#fullcontent {position:absolute;top:188px;left:190px;width:770px;z-index:20}Der Trick ist, den "top"-Teil in HTML als separates DIV zu definieren. Z.B.
<div id="new2" style="position:absolute;top:188px;"><div id="fullcontent">
[Rest der Seite]
</div> [vergessen Sie nicht, das neue Div zu schließen!]
Definieren Sie dann "fullcontent" in der CSS-Datei ohne "top", z.B.
#fullcontent {position:absolute; left:190px;width:770px;z-index:20}Das sollte funktionieren. Einige andere Teile des HTML sind möglicherweise ebenfalls als "absolute" definiert, sodass sie zurückbleiben: versuchen Sie dasselbe. Wenn etwas immer noch nicht funktioniert, experimentieren Sie mit "position:relative" innerhalb des "position:absolute"-Divs. Wenn etwas IMMER NOCH nicht funktioniert, prüfen Sie, ob die gesamte Seitenbreite doppelt festgelegt ist: z.B. "fullcontent" definiert die Seite als Breite: 970px (oder was auch immer), und ein Element innerhalb dieses Wrappers tut dies ebenfalls, was den Browser verwirren und viel Platz auf der rechten Seite lassen könnte.
Ich hoffe, das hilft. Ich bin KEIN Experte, kann also keine Folgefragen beantworten, hatte aber das gleiche Problem und das schien für mich zu funktionieren. Ich weiß, wie frustrierend es ist, wenn alle Tech-Seiten sagen "machen Sie das, es ist einfach" und Sie den Code genau kopieren und er NICHT funktioniert.
Frohes neues Jahr.
Chris
Wie mache ich die Haupt-Div-Seite mit HTML
eine andere Div von Seiten muss sich innerhalb der Haupt-Div befinden
von: omar abdi
Adresse: Mogadischu – Somalia
hi
In welchem CSS-Code verwenden wir das Tag, um das Design der Website beim Zoomen/Auszoomen im Zentrum zu halten?
html,body
{
padding:0px;
margin:0px;
Zentrierung funktioniert hier nicht
Was tun?
Ich brauche eine Lösung, wie man Text zentriert, wenn wir ein responsives Design haben. Meine Website wird sich auf RD ändern und ich habe sie getestet, aber nicht mit 100% gelösten Problemen. Danke
{ margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
:first-child+html #page {position:relative;}/ie7*/
html #page{position:relative;}/ie6/
#content_container{display:table-cell;vertical-align: middle;}
:first-child+html #content_container{position:absolute;top:50%;}/ie7/
* html #content_container{position:absolute;top:50%;}/ie6*/
:first-child+html #content{position:relative;top:-50%;}/ie7/
* html #content{position:relative;top:-50%;}/ie6*/
html,body{height:100%;}
#page{height:100%;width:465px;}
Großartig!
Danke
Funktioniert einwandfrei. Danke
das alles zentriert nur die Webseite horizontal
WIE zentriert man die Webseite vertikal???
genau das, womit ich früher zu kämpfen hatte, als ich mein Design in Photoshop geschnitten und auf eine Webseite exportiert habe, dann war die gesamte Seite auf der linken Seite der Seite vertikal ausgerichtet, also denke ich, dass das mit diesem Code nicht passieren wird, richtig………..?
Genial, hat für mich funktioniert :)
Vielen Dank! Das hat bei mir perfekt funktioniert :)) Neue Dinge zu lernen ist immer großartig!
Ich weiß es, aber jetzt hilft es mir, mich wieder zu erinnern.
Vielen Dank für diesen hübschen und einfachen Code. Der mein einfaches, aber großes Problem gelöst hat. Gute Arbeit… weitermachen…
Danke, sehr hilfreich
Hallo, ich bin neu in HTML und CSS… Ich habe viel über Flexbox gehört… und sehe hier eine Möglichkeit, die ganze Seite zu zentrieren, alter Stil… aber ist es nicht besser, die gesamte Website mit Flexbox zu zentrieren?
Ich habe ein Problem, die Website ist komplett zentriert und ich habe keine Probleme, sobald ich die Website hochlade, funktioniert die Vorschau, aber beim Aufrufen der URL wird sie linksbündig ausgerichtet, bitte helfen Sie, es macht mich verrückt.
Wie mache ich das, wenn ich einen Hintergrund für einen Abschnitt haben möchte, der sich außerhalb des page-wrap befindet? Ist es gute Praxis, den gesamten Inhalt eines Abschnitts in einen Container zu legen?
Und im Hinblick auf Responsivität, wie wäre es mit max-width anstelle von width?
Ausprobiert und getestet. Es funktioniert wie ein Zauber!