Ich habe viel gesucht, um ein div zu zentrieren, sowohl horizontal als auch vertikal. Dies ist die Methode, die überall gegeben ist:
Ich habe gerade eine neue Lösung gefunden, um ein div sowohl horizontal als auch vertikal zu zentrieren, indem man es in eine Tabelle einpackt. Ich habe es in ie7 und darüber getestet, plus andere Browser.
Hier ist ein Beispiel: Ссылка
Ich habe mich gewundert, dass die erste Methode überall im Internet gefunden wird, SO usw. und erfordert im Voraus Wissen über Breite und Höhe oder wird normalerweise über Javascript berechnet.
Der Tabellenansatz scheint fehlerfrei zu sein und erfordert weder Javascript noch feste Höhe / Breite.
Gibt es irgendwelche Nachteile für den Tabellenansatz?
(Ich kenne die Höhe / Breite des Div nicht, das ich zentrieren möchte.)
Aktualisieren (Um meine Frage klarer zu stellen) :
Ich selbst
display:table erreichen kann, was die IE7-Unterstützung zunichte macht. Aber was ich versuche zu verstehen ist, dass, wenn ich dies mit einem einzelnen <table> -Element erreichen kann, was die Nachteile sind, wenn überhaupt.
Überprüfung der Antworten hier und bei ähnlichen Fragen, niemand hat diese Methode empfohlen, obwohl es alle gültigen HTML Elemente und Syntax und Regeln verwendet.
Wenn jeder empfiehlt, javascript für die Darstellung zu verwenden, obwohl dies mit CSS leicht möglich ist, muss es einige Nachteile haben.
Code:
%Vor%und wenden Sie dann das folgende CSS an
%Vor%Es gibt verschiedene Gründe, warum Sie Tabellen nicht verwenden sollten. Einige, die hier bereits besprochen wurden. Ich verstehe, dass Sie nur eine Zeile verwenden, und Sie werden hoffentlich versuchen, Ihr Versprechen zu halten, keine Zeilen hinzuzufügen, aber wenn Sie dieses Versprechen brechen, werden einige der folgenden Gründe eine viel größere Bedeutung haben, wie die Rendering-Geschwindigkeit und die Bildschirmleseproblem. Das ist genau warum sie etwas Standard nennen und manche nicht. Standards berücksichtigen alles und jede Situation.
Einer der größten Nachteile von Tabellen ist die Art, wie sie von Browsern gerendert werden. Das Innere des Tisches muss geladen werden, bevor Position und Größe des Tisches genau bestimmt werden können. Dies kann zu Problemen führen, wenn Sie viele Informationen in der Tabelle haben.
Die Verwendung von Tabellen für nicht tabellarische Daten bedeutet, dass Sie ungültiges X / HTML schreiben. Was für einige in Ordnung sein kann. Aber ich empfehle es nicht. Siehe hier
Ich wusste das nicht, bevor ich nach anderen weniger bekannten Problemen mit der Verwendung von Tabellen suchte.
Suchmaschinen lieben gültigen Code, also indem sie Tabellen nicht verwenden, mit denen es hilft Suchmaschinenoptimierung (SEO).
Siehe hier für weitere Informationen zu diesem
Tabellen können in Bildschirmleseprogrammen nicht einfach verwendet werden. Überprüfen Sie diesen Artikel .
Wenn Sie eine Tabelle für das Layout verwenden müssen, denken Sie daran, dass die Bildschirmleseprogramme und Braillezeilen lesen Tabellen Zeile für Zeile durch die Spalten. Das TAB Auf diese Weise geht die Bestellung auch durch die Tabelle. Also stellen Sie sicher, dass Sie Tabellenstruktur macht Sinn beim Lesen von links nach rechts, Zeile für Zeile.
Ich hasse es zuzugeben, dass, wenn Sie ehrlich nur diese eine Tabelle mit einer Zeile und einer Spalte und mit einer sehr kleinen Menge an Daten verwenden (was ich eine Einschränkung nennen würde), dann würde die Seite wahrscheinlich schneller als die Zeit, die Sie Javascript verwenden, aber die anderen Probleme bleiben.
Tabellen sollen nur für tabellarische Daten verwendet werden - nicht für Layoutzwecke.
Die Verwendung von Tabellen für Ihr Problem bietet eine schnelle und einfache Lösung für Sie, aber es bedeutet nicht, dass es die beste oder korrekte Methode ist.
Nur weil etwas ein wenig mehr Nachdenken und Anstrengung braucht, heißt das nicht, dass es vermieden werden sollte.
Benutze dafür Tabellen auf eigene Gefahr - deine unsterbliche Seele kann zu einem späteren Zeitpunkt für deine Taten einen schweren psychischen Tribut zahlen: p
Ich habe viel gesucht, um ein %code% zu zentrieren, sowohl horizontal als auch vertikal. Dies ist die Methode, die überall gegeben ist:
%Vor%Ich habe gerade eine neue Lösung gefunden, um ein %code% sowohl horizontal als auch vertikal zu zentrieren, indem man es in eine Tabelle einpackt. Ich habe es in ie7 und darüber getestet, plus andere Browser.
Hier ist ein Beispiel: Ссылка
Ich habe mich gewundert, dass die erste Methode überall im Internet gefunden wird, SO usw. und erfordert im Voraus Wissen über Breite und Höhe oder wird normalerweise über Javascript berechnet.
Der Tabellenansatz scheint fehlerfrei zu sein und erfordert weder Javascript noch feste Höhe / Breite.
Gibt es irgendwelche Nachteile für den Tabellenansatz?
(Ich kenne die Höhe / Breite des Div nicht, das ich zentrieren möchte.)
Aktualisieren (Um meine Frage klarer zu stellen) :
Ich selbst
Aber was ich versuche zu verstehen ist, dass, wenn ich dies mit einem einzelnen %code% -Element erreichen kann, was die Nachteile sind, wenn überhaupt.
Überprüfung der Antworten hier und bei ähnlichen Fragen, niemand hat diese Methode empfohlen, obwohl es alle gültigen %code% Elemente und Syntax und Regeln verwendet.
Wenn jeder empfiehlt, %code% für die Darstellung zu verwenden, obwohl dies mit %code% leicht möglich ist, muss es einige Nachteile haben.
Code:
%Vor%und wenden Sie dann das folgende CSS an
%Vor%Es gibt verschiedene Gründe, warum Sie Tabellen nicht verwenden sollten. Einige, die hier bereits besprochen wurden. Ich verstehe, dass Sie nur eine Zeile verwenden, und Sie werden hoffentlich versuchen, Ihr Versprechen zu halten, keine Zeilen hinzuzufügen, aber wenn Sie dieses Versprechen brechen, werden einige der folgenden Gründe eine viel größere Bedeutung haben, wie die Rendering-Geschwindigkeit und die Bildschirmleseproblem. Das ist genau warum sie etwas Standard nennen und manche nicht. Standards berücksichtigen alles und jede Situation.
Einer der größten Nachteile von Tabellen ist die Art, wie sie von Browsern gerendert werden. Das Innere des Tisches muss geladen werden, bevor Position und Größe des Tisches genau bestimmt werden können. Dies kann zu Problemen führen, wenn Sie viele Informationen in der Tabelle haben.
Die Verwendung von Tabellen für nicht tabellarische Daten bedeutet, dass Sie ungültiges X / HTML schreiben. Was für einige in Ordnung sein kann. Aber ich empfehle es nicht. Siehe hier
Ich wusste das nicht, bevor ich nach anderen weniger bekannten Problemen mit der Verwendung von Tabellen suchte.
Suchmaschinen lieben gültigen Code, also indem sie Tabellen nicht verwenden, mit denen es hilft Suchmaschinenoptimierung (SEO).
Siehe hier für weitere Informationen zu diesem
Tabellen können in Bildschirmleseprogrammen nicht einfach verwendet werden. Überprüfen Sie diesen Artikel .
Wenn Sie eine Tabelle für das Layout verwenden müssen, denken Sie daran, dass die Bildschirmleseprogramme und Braillezeilen lesen Tabellen Zeile für Zeile durch die Spalten. Das TAB Auf diese Weise geht die Bestellung auch durch die Tabelle. Also stellen Sie sicher, dass Sie Tabellenstruktur macht Sinn beim Lesen von links nach rechts, Zeile für Zeile.
Ich hasse es zuzugeben, dass, wenn Sie ehrlich nur diese eine Tabelle mit einer Zeile und einer Spalte und mit einer sehr kleinen Menge an Daten verwenden (was ich eine Einschränkung nennen würde), dann würde die Seite wahrscheinlich schneller als die Zeit, die Sie Javascript verwenden, aber die anderen Probleme bleiben.
sehen Sie die unten stehende Funktion und ändern Sie nach Ihren Bedürfnissen
%Vor%Aktualisierte Antwort HTML und CSS:
HTML:
%Vor%CSS:
%Vor%Noch mehr aktualisiert mit jquery und bleibt immer in der Mitte, wenn Sie auch die Größe des Fensters ändern: Ссылка
Demo: Ссылка
Ich bin davon abhängig, was Sie erreichen wollen. Wenn es nur eine Seite mit einer Sache zentriert ist, dann ist es großartig.
Aber ich sehe, Sie haben die Tischposition festgelegt: behoben. Was bedeutet, dass es mit Ihnen blättert und oben auf den Inhalt unten geht. Die andere Sache ist, dass, wenn diese Tabelle wirklich voll ist, Sie nicht in der Lage sein werden zu sehen, was am Ende dieser Tabelle ist, da die Position auf fest eingestellt ist.
Es ist eine großartige Lösung, um ein kleines Stück Text, Bild oder Information zu zentrieren.
Aber es ist eine schlechte Sache, innerhalb einer Seite mit vielen anderen Inhalten oder viel Inhalt innerhalb der Tabelle zu verwenden.
Randnotiz: Mit Javascript, um etwas so einfaches zu erreichen, ist dumm. Es kann ohne Javascript nur mit CSS durchgeführt werden. Was ist, wenn Sie Javascript verwenden, um etwas zu zentrieren, und einen Client ohne Javascript-Besuche? Lass uns das Web nicht mit JavaScript / jquery für all die einfachen Dinge zerstören;)
Es gibt nicht viel Problem, bis Sie kleine Daten in der Tabelle haben. Tabellen sind für Browser etwas schwerfällig und mit mehr eingehenden Daten verlangsamen sie die Antwortzeit im Vergleich zum Web.
Das Beispiel, das Sie gezeigt haben, ist nur ein Beispiel, aber in der realen Welt werden Sie Daten darin haben. Wenn es groß wird, versuche eine andere Methode zu wählen. möglicherweise ist das %code% oder %code% , das in allen modernen Browsern sehr bald unterstützt wird. Sehen Sie ein Beispiel hier. Ссылка
Wenn die Daten darin klein sind, können Sie Ihre Methode verwenden.
Grundsätzlich ist es etwas längere Ladezeiten (JavaScript ist langsamer), schlecht für Screenreader (testen Sie es mit einem wie JAWS ), und schwer zu redesignieren (wirklich nur schwer, wenn du vergisst, warum zum Teufel du einen Tisch dort hingestellt hast, also achte darauf, dir einen Kommentar zu hinterlassen :) . Was wäre wirklich nett ( Ich spreche mit dir, W3C! ) ist etwas wie %code% . Dann könntest du auch Dinge wie %code% oder %code% machen.
Laut StatCounter , ab November 2012, IE7-Konten für nur 0,87% des Nutzungsanteils von Desktop-Browsern. Es ist nicht klar, wie genau diese Maßnahme ist. einige Länder sind wahrscheinlich überproportional gewichtet und der Stichprobensatz fast sicher doesn ' Sie stimmen genau mit den Nutzerdemografien überein, was auch immer sie sind. Aber wie viel würden Sie wirklich verlieren, wenn Sie IE7 hinter sich lassen würden? Könnte auch mit %code%
gehenAuf der anderen Seite macht es mich verrückt, dass %code% notwendig ist. Dies ist das nächste, was ich zu einer praktikablen Alternative bekommen kann:
HTML
%Vor%CSS
%Vor%Bisher habe ich noch nicht herausgefunden, wie man %code% des Elements %code% vermeiden kann. Hier ist eine Arbeitsdemo . Ich habe dies auf Mac 10.8.1 FF 18, Safari 6.0, Chrome 25.0.1362.0 Kanarienvogel und iOS Safari 6.0.1 getestet.
Wenn ich meine Worte an den Geek im Inneren lenke, der sich nicht um Standards kümmert oder Multichannel-Inhalte liefert ... gibt es wirklich nur ein technisches Problem mit Tabellen, das ich mir vorstellen kann, wenn Sie große Inhalte in dieser Zelle haben Der Browser wartet darauf, dass der gesamte Inhalt geladen wird, um die Breite und Höhe der Zelle vor dem Rendern berechnen zu können. Wenn der Inhalt also wirklich groß ist und große Bilder enthält, wird er nicht allmählich gerendert ... und zu einem festen Objekt gemacht Tisch, nun, der obige Trick wird nicht funktionieren.
Tabellen sollen nur für tabellarische Daten verwendet werden - nicht für Layoutzwecke.
Die Verwendung von Tabellen für Ihr Problem bietet eine schnelle und einfache Lösung für Sie, aber es bedeutet nicht, dass es die beste oder korrekte Methode ist.
Nur weil etwas ein wenig mehr Nachdenken und Anstrengung braucht, heißt das nicht, dass es vermieden werden sollte.
Benutze dafür Tabellen auf eigene Gefahr - deine unsterbliche Seele kann zu einem späteren Zeitpunkt für deine Taten einen schweren psychischen Tribut zahlen: p
Laut StatCounter , ab November 2012, IE7-Konten für nur 0,87% des Nutzungsanteils von Desktop-Browsern. Es ist nicht klar, wie genau diese Maßnahme ist. einige Länder sind wahrscheinlich überproportional gewichtet und der Stichprobensatz fast sicher doesn ' Sie stimmen genau mit den Nutzerdemografien überein, was auch immer sie sind. Aber wie viel würden Sie wirklich verlieren, wenn Sie IE7 hinter sich lassen würden? Könnte auch mit display: table;
Auf der anderen Seite macht es mich verrückt, dass display: table; notwendig ist. Dies ist das nächste, was ich zu einer praktikablen Alternative bekommen kann:
HTML
%Vor%CSS
%Vor% Bisher habe ich noch nicht herausgefunden, wie man height des Elements div#shifter vermeiden kann. Hier ist eine Arbeitsdemo . Ich habe dies auf Mac 10.8.1 FF 18, Safari 6.0, Chrome 25.0.1362.0 Kanarienvogel und iOS Safari 6.0.1 getestet.
Es gibt nicht viel Problem, bis Sie kleine Daten in der Tabelle haben. Tabellen sind für Browser etwas schwerfällig und mit mehr eingehenden Daten verlangsamen sie die Antwortzeit im Vergleich zum Web.
Das Beispiel, das Sie gezeigt haben, ist nur ein Beispiel, aber in der realen Welt werden Sie Daten darin haben. Wenn es groß wird, versuche eine andere Methode zu wählen. möglicherweise ist das flexbox model oder box model , das in allen modernen Browsern sehr bald unterstützt wird. Sehen Sie ein Beispiel hier. Ссылка
Wenn die Daten darin klein sind, können Sie Ihre Methode verwenden.
Wenn ich meine Worte an den Geek im Inneren lenke, der sich nicht um Standards kümmert oder Multichannel-Inhalte liefert ... gibt es wirklich nur ein technisches Problem mit Tabellen, das ich mir vorstellen kann, wenn Sie große Inhalte in dieser Zelle haben Der Browser wartet darauf, dass der gesamte Inhalt geladen wird, um die Breite und Höhe der Zelle vor dem Rendern berechnen zu können. Wenn der Inhalt also wirklich groß ist und große Bilder enthält, wird er nicht allmählich gerendert ... und zu einem festen Objekt gemacht Tisch, nun, der obige Trick wird nicht funktionieren.
Ich bin davon abhängig, was Sie erreichen wollen. Wenn es nur eine Seite mit einer Sache zentriert ist, dann ist es großartig.
Aber ich sehe, Sie haben die Tischposition festgelegt: behoben. Was bedeutet, dass es mit Ihnen blättert und oben auf den Inhalt unten geht. Die andere Sache ist, dass, wenn diese Tabelle wirklich voll ist, Sie nicht in der Lage sein werden zu sehen, was am Ende dieser Tabelle ist, da die Position auf fest eingestellt ist.
Es ist eine großartige Lösung, um ein kleines Stück Text, Bild oder Information zu zentrieren.
Aber es ist eine schlechte Sache, innerhalb einer Seite mit vielen anderen Inhalten oder viel Inhalt innerhalb der Tabelle zu verwenden.
Randnotiz: Mit Javascript, um etwas so einfaches zu erreichen, ist dumm. Es kann ohne Javascript nur mit CSS durchgeführt werden. Was ist, wenn Sie Javascript verwenden, um etwas zu zentrieren, und einen Client ohne Javascript-Besuche? Lass uns das Web nicht mit JavaScript / jquery für all die einfachen Dinge zerstören;)
Grundsätzlich ist es etwas längere Ladezeiten (JavaScript ist langsamer), schlecht für Screenreader (testen Sie es mit einem wie JAWS ), und schwer zu redesignieren (wirklich nur schwer, wenn du vergisst, warum zum Teufel du einen Tisch dort hingestellt hast, also achte darauf, dir einen Kommentar zu hinterlassen :) . Was wäre wirklich nett ( Ich spreche mit dir, W3C! ) ist etwas wie box-align: x y; . Dann könntest du auch Dinge wie align: center center oder align: center bottom; machen.