webentwicklung-frage-antwort-db.com.de

Inhalte innerhalb eines div ausrichten

Ich benutze den CSS-Stil text-align, um den Inhalt eines Containers in HTML auszurichten. Dies funktioniert gut, wenn der Inhalt Text ist oder der Browser IE ist. Aber sonst geht es nicht.

Wie der Name schon sagt, wird er hauptsächlich zum Ausrichten von Text verwendet. Die Eigenschaft align wurde lange zurückgewiesen.

Gibt es eine andere Möglichkeit, den Inhalt in HTML auszurichten?

138
Hemanshu Bhojak

textausrichtung richtet Text und anderen Inline-Inhalt aus. Block-Child-Elemente werden nicht ausgerichtet.

Um dies zu erreichen, möchten Sie dem Element, das Sie ausrichten möchten, eine Breite zuweisen, wobei die linken und rechten Ränder "auto" sind. Dies ist die standardkonforme Methode, die mit Ausnahme von IE5.x überall funktioniert.

<div style="width: 50%; margin: 0 auto;">Hello</div>

Damit dies im IE6 funktioniert, müssen Sie sicherstellen, dass Standards Mode aktiviert ist, indem Sie einen geeigneten DOCTYPE verwenden.

Wenn Sie wirklich den IE5/Quirks-Modus unterstützen müssen, den Sie heutzutage nicht mehr unbedingt benötigen sollten, können Sie die beiden verschiedenen Zentrierungsansätze kombinieren:

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Natürlich werden Stile am besten in ein Stylesheet eingefügt, aber die Inline-Version ist illustrativ.)

202
bobince

Sie können es auch so machen:

HTML

<body>
    <div id="wrapper_1">
        <div id="container_1"></div>
    </div>
</body>

CSS

body { width: 100%; margin: 0; padding: 0; overflow: hidden; }

#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }

#container_1 { display: block; float: left; position: relative; right: 50%; }

Wie Artem Russakovskii auch erwähnte, lesen Sie den Originalartikel von Mattew James Taylor für die vollständige Beschreibung.

8
Mahdi

Ehrlich gesagt, ich hasse alle Lösungen, die ich bisher gesehen habe, und ich sage Ihnen warum: Sie scheinen es nie richtig auszurichten ... also, was ich normalerweise tue:

Ich weiß, welche Pixelwerte jedes div und ihre jeweiligen Ränder haben ... also mache ich Folgendes.

Ich erstelle einen Wrapper div mit einer absoluten Position und einem linken Wert von 50% ... also beginnt dieses div jetzt in der Mitte des Bildschirms und dann subtrahiere ich die Hälfte des gesamten div-Breiteninhalts ... und ich bekomme SCHÖNE Skalierungsinhalte ... und ich denke, das funktioniert auch in allen Browsern. Probieren Sie es selbst aus (in diesem Beispiel wird davon ausgegangen, dass der gesamte Inhalt Ihrer Website in einem div-Tag verpackt ist, das diese Wrapper-Klasse verwendet und der gesamte Inhalt 200 px breit ist):

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

EDIT: Ich habe vergessen zu ergänzen ... Sie können auch die Breite einstellen: 0px; In diesem Wrapper div für einige Browser, um die Bildlaufleisten nicht anzuzeigen, und Sie können die absolute Positionierung für alle inneren Divs verwenden.

Dies funktioniert auch erstaunlich, wenn Sie Ihre Inhalte mit top: 50% und Margin-top vertikal ausrichten. Prost!

6
Alexandru
<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}
5
krithi k

Hier ist eine Technik, die ich benutze, die gut funktioniert hat:

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

2
Bloodhound

Alle Antworten sprechen von horizontaler Ausrichtung.

Beachten Sie zum vertikalen Ausrichten mehrerer Inhaltselemente diesen Ansatz:

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

0
Nicolas