Richten Sie Inhalt in einem div

StackOverflow https://stackoverflow.com/questions/684634

  •  22-08-2019
  •  | 
  •  

Frage

Ich benutze CSS text-align Inhalt in einem Container in HTML auszurichten. Dies funktioniert gut, während der Inhalt Text oder der Browser IE ist. Aber sonst funktioniert es nicht.

Auch als der Name vermuten lässt es grundsätzlich Text auszurichten verwendet wird. Die Eigenschaft align ist seit langem wieder veraltet.

Gibt es eine andere Art und Weise Inhalte in HTML auszurichten?

War es hilfreich?

Lösung

text-align richtet Text und anderen Inline-Inhalt. Dabei spielt es keine Blockelement Kinder ausgerichtet sind.

Um das zu tun, Sie wollen das Element geben Sie eine Breite, die mit ‚auto‘ linken und rechten Rand ausgerichtet werden sollen. Dies ist die standardkonforme Art und Weise, die überall außer IE5.x funktioniert. 

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

Für die in IE6 arbeiten, müssen Sie sicherstellen Standards-Modus machen, ist die Verwendung auf ein geeignetes DOCTYPE.

Wenn Sie wirklich brauchen, um IE5 / Quirks-Modus, der in diesen Tagen zu unterstützen sollte man nicht wirklich, es ist möglich, die zwei unterschiedliche Ansätze zur Zentrierung zu kombinieren: 

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

(Offensichtlich Arten werden am besten in einem Stylesheet setzen, aber die Inline-Version ist illustrativ.)

Andere Tipps

Sie können es so machen auch:

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 erwähnt, auch den Original-Artikel gelesen von Mattew James Taylor für die vollständige Beschreibung. 

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

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

Ehrlich gesagt, ich hasse alle Lösungen, die ich bisher gesehen habe, und ich werde Ihnen sagen, warum: Sie scheinen einfach nicht immer es richtig auszurichten ... so hier, was ich in der Regel tun:

Ich weiß, was Pixelwerte jedes div und ihre jeweiligen Margen halten ... so kann ich die folgenden.

Ich werde einen Wrapper div erstellen, die eine absolute Position und einen linken Wert von 50% ... so dieses div beginnt nun in der Mitte des Bildschirms, und dann habe ich subtrahieren die Hälfte aller den Inhalt der Breite des div ... und ich SCHÖN bekommen Skalierung Inhalt ... und ich denke, das ist in allen Browsern funktioniert auch. Probieren Sie es selbst (in diesem Beispiel alle Inhalte auf Ihrer Website übernimmt in einem div-Tag eingewickelt, die diese Wrapper-Klasse verwendet und alle Inhalte in es 200px in der Breite ist): 

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

EDIT: Ich vergaß hinzuzufügen ... Sie können Breite festlegen möchten: 0px; für einige Browser auf dieser Wrapper div zeigen nicht die Bildlaufleisten, und dann können Sie die absolute Positionierung für alle inneren divs verwenden.

Das funktioniert auch super für vertikal Ihre Inhalte als auch mit Top-Ausrichtung: 50% und margin-top. Cheers!

Hier ist eine Technik, die ich, dass verwenden hat gut funktioniert: 

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

Alle Antworten sprechen über horizontal ausrichten.

Für die vertikale Ausrichtung mehrere Inhaltselemente, werfen Sie einen Blick auf 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>

Nur ein weiteres Beispiel mit HTML und CSS: 

<div style="width: Auto; margin: 0 auto;">Hello</div>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top