Warum auto-Attribut für die margin nicht funktioniert vertikal, während es funktioniert horizontal?

Habe ich gesehen, dass während der Entwicklung von Webseiten, vertikal zentrieren eines Containers (Feste Höhe) in einem container, der von zufälliger Höhe kommt immer so ein Albtraum für die web-Entwickler (zumindest mir), während, wenn es um die horizontale Zentrierung container (Feste Breite) in einem container, der von random-Breite, die margin:0px auto; neigt dazu zu dienen, eine einfache Möglichkeit, in das standard-Modell.

Wenn die Dinge können so einfach sein, warum nicht CSS-Arbeit mit der margin:auto 0px; wenn es um die Zentrierung einen container mit fester Höhe in einem container, der von zufälliger Höhe? Gibt es irgendeinen bestimmten Grund, dies zu tun? Vielen Dank für Ihre Einsichten im Voraus.

phrogz.net/css/vertical-align/index.html bietet einige Einblicke: "HTML-layout-traditionell wurde nicht entworfen, um anzugeben, vertikale Verhalten. Durch seine Natur, es skaliert von der Breite her, und der Inhalt fließt in angemessener Höhe auf der Grundlage der verfügbaren Breite an. Traditionell, horizontale Größe und layout ist einfach; vertikale Größenanpassung und layout abgeleitet wurde."
wahr. aber noch habe ich ein Bauchgefühl, es könnte viel verbessert werden. es ist nur lästig, Sie können nicht verwenden vertical-align:middle, es sei denn, der container angezeigt wird als table-cell.
Ich hatte schon gelesen das die Seite, die Sie bezogen hatte, aber anscheinend finde ich nicht die Antwort zufriedenstellend. Grund: HTML war traditionell nur dazu gedacht zu zeigen/teilen, dass einfache Textdaten, wenn es war, entwickelt am CERN, aber dann gab es so viele änderungen, wenn Sie vergleichen die traditionellen HTML zu HTML5. Dann ist es nicht höchste Zeit, um sich anzupassen, was fördert die Leichtigkeit des Zugangs?
Naja... vertical-align gemeint ist für text, nicht Boxen. Vielleicht könnte es genannt worden vertical-text-align oder so, aber das ist, wie es wurde zuerst definiert, so...
Es ist wahr, die vertikale standards könnte ein update zum Umgang mit der modernen Art und Weise web-Seiten sind gebaut, wo wir wollen, um zu Steuern, horizontale und vertikale Inhalte. Aber ich denke auch, dass so viele Websites, die derzeit gebaut auf der Annahme, dass margin: auto nichts tut, vertikal, dass es vielleicht "zu spät", um es zu ändern, ohne viel Spielraum.

InformationsquelleAutor ikartik90 | 2011-12-23

css html

13

Es ist wirklich weniger als ein Alptraum, als Sie denken, einfach nicht verwenden Margen. vertical-align wirklich das ist, was sollten Sie sich auf die fluid-Höhe vertikal zentrieren. Ich warf zusammen eine kurze demo, um zu demonstrieren, dass mein Punkt:

HTML:
```
<span></span><div id="any-height"></div>
```
CSS:
```
* { margin: 0; padding: 0; }
html, body { 
    height: 100%;
    text-align: center; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
#any-height { 
    background: #000;
    text-align: left;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    display: inline-block; }
```
Finden Sie unter: http://jsfiddle.net/Wexcode/jLXMS/

ok, Sie haben einen Punkt. vertical-align ist nicht unbedingt der Alptraum, IE7 ist, da war der IE6.
Ich habe verwendet, vertical-align, aber nicht dient, eine befriedigende Lösung an den meisten stellen. Grund: Das problem mit vertical-align ist, dass es wohl nicht mit allen Browsern kompatibel. Für Referenz diesen link. Also keine Punkte fella. 🙁
gibt Es tools gibt, die überprüfen können, wenn etwas funktioniert in anderen Browsern, so dass Sie nicht haben, um verlassen sich auf Diagramme, die willkürlich label Dinge wie buggy... ich bin mir ziemlich sicher, dass dies funktioniert in allen gängigen Browsern, und wenn Sie sich für erweiterte Kompatibilität, sollten Sie überprüfen, diesem Artikel.
Eine Frage - warum bist du mit den leeren Bereich in Ihrem code? hatte nicht den Grund. Und wenn Sie vielleicht einen Punkt haben, wo Sie stehen, meine Frage ist nicht, was sollte ich verwenden, wenn ich vertikal zentrieren eines Containers aber warum margin:auto 0px sich nicht vertikal zentrieren eines Containers. Vielen Dank für das Adobe-tool. Funktioniert Super.
Gut, ich dachte, ich würde Ihnen eine alternative. Verwenden Sie eine leere <span> weil vertical-align richtet Elemente im Verhältnis zu Ihren Geschwistern. Wenn ein element hat keine Geschwister, es wird nicht vertikal ausgerichtet sein.

InformationsquelleAutor Wex
9

Die richtige Antwort für Ihre Frage ist, dass margin: auto 0 nicht auf die gleiche Weise arbeiten, dass margin: 0 auto funktioniert, weil width: auto nicht auf die gleiche Weise arbeiten height: auto tut.

Vertikale auto-margin funktioniert bei absolut positionierten Elementen, die mit einer bekannten Höhe.
```
.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 150px;
    height: 150px;
    margin: auto;
}
```
InformationsquelleAutor user1602599

css ----------------

.aligncenter{
      display: -webkit-box;
      display: -moz-box;
      display: box;
      -webkit-box-align: center;
      -moz-box-align: center;
      flex-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      flex-pack: center;
}

html -------------------------

<div class="aligncenter">

---your content appear at the middle of the parent div----

</div>

Hinweis-----------
diese css-Klasse mit fast allen Browsern

das funktioniert nicht - wahrscheinlich weil es keine solche Anzeige-Eigenschaft namens "box". downvoted

InformationsquelleAutor Mok

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.