Inhalt innerhalb eines div ausrichten

Lesezeit: 7 Minuten

Ich verwende text-align im CSS-Stil, um Inhalte innerhalb eines Containers in HTML auszurichten. Dies funktioniert gut, während der Inhalt Text ist oder der Browser IE ist. Aber anders geht es nicht.

Wie der Name schon sagt, wird es im Wesentlichen zum Ausrichten von Text verwendet. Die Eigenschaft align ist seit langem veraltet.

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

  • Geben Sie uns bitte mehr Informationen? hinter dem Code, der in anderen Browsern nicht funktioniert.

    – Schoban

    26. März 2009 um 5:41 Uhr

  • Sie sollten ein Beispiel Ihres Markups geben, damit die Leute wissen, was Sie zu tun versuchen. Ansonsten ist Ihre Frage mehrdeutig.

    – Levik

    26. März 2009 um 5:41 Uhr

text-align richtet Text und andere Inline-Inhalte aus. Kindelemente von Blockelementen werden nicht ausgerichtet.

Dazu geben Sie dem Element, das Sie ausrichten möchten, eine Breite mit „automatischen“ linken und rechten Rändern. Dies ist die standardkonforme Methode, die überall außer IE5.x funktioniert.

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

Damit dies in IE6 funktioniert, müssen Sie sicherstellen Standardmodus eingeschaltet ist, indem ein geeigneter DOCTYPE verwendet wird.

Wenn Sie den IE5/Quirks-Modus wirklich unterstützen müssen, was Sie heutzutage nicht wirklich sollten, ist es möglich, die beiden verschiedenen Ansätze zur Zentrierung zu 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 dient der Veranschaulichung.)

  • Wenn Sie die Div-Breite nicht kennen, was häufig der Fall ist, funktioniert diese Lösung in allen Browsern einwandfrei: matthewjamestaylor.com/blog/…

    – Artjom Russakowskij

    28. Januar 2010 um 8:35 Uhr

  • Ich habe

    Hallo

    verwendet

    – Aamol

    9. August 2017 um 7:26 Uhr

Benutzer-Avatar
krithi k

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

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

  • Dieses Code-Snippet kann zwar die Frage lösen, inklusive Erklärung hilft wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für zukünftige Leser beantworten und diese Personen die Gründe für Ihren Codevorschlag möglicherweise nicht kennen.

    – Andreas

    29. Oktober 2016 um 10:40 Uhr

  • Entschuldigung, der obige Code richtet ein Div-Zentrum mit im übergeordneten Inhalt aus

    – krithi k

    23. November 2016 um 12:25 Uhr

  • IDK warum heißt es text-align wenn es alles auf die Mitte ausrichtet 🤣

    – Sambhav Khandelwal

    5. Juli um 16:41 Uhr

Benutzer-Avatar
nmak18

Nachfolgend sind die Methoden aufgeführt, die bei mir immer funktioniert haben

  1. Durch die Verwendung des Flex-Layout-Modells:

Stellen Sie die Anzeige des übergeordneten div auf ein display: flex; und Sie können die untergeordneten Elemente innerhalb des div mit ausrichten justify-content: center; (um die Elemente auf der Hauptachse auszurichten) und align-items: center; (um die Elemente auf der Querachse auszurichten).

Wenn Sie mehr als ein untergeordnetes Element haben und deren Anordnung (Spalten/Zeilen) steuern möchten, können Sie auch hinzufügen flex-direction Eigentum.

Arbeitsbeispiel:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}
<div class="parent">
  <div class="child"></div>
</div>

2. (ältere Methode) Verwenden von Position, Randeigenschaften und fester Größe

Arbeitsbeispiel:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}
<div class="parent">
  <div class="child"></div>
</div>

Benutzer-Avatar
Mahdi

Du kannst 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 Artjom Russakovski auch erwähnt, lesen Sie den Originalartikel von Matthäus James Taylor für die vollständige Beschreibung.

Benutzer-Avatar
Alexandru

Ehrlich gesagt hasse ich alle Lösungen, die ich bisher gesehen habe, und ich werde Ihnen sagen, warum: Sie scheinen es einfach nicht immer richtig auszurichten … also mache ich normalerweise Folgendes:

Ich weiß, welche Pixelwerte jedes div und seine jeweiligen Ränder enthalten … also mache ich Folgendes.

Ich erstelle ein Wrapper-Div, das eine absolute Position und einen linken Wert von 50 % hat … also beginnt dieses Div jetzt in der Mitte des Bildschirms, und dann ziehe ich die Hälfte des gesamten Inhalts von der Breite des Div ab … und ich bekomme SCHÖN skalierte Inhalte … und ich denke, das funktioniert auch in allen Browsern. Probieren Sie es selbst aus (dieses Beispiel geht davon aus, dass der gesamte Inhalt Ihrer Website in ein div-Tag eingeschlossen ist, das diese Wrapper-Klasse verwendet, und der gesamte Inhalt darin 200 Pixel breit ist):

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

BEARBEITEN: Ich habe vergessen hinzuzufügen … Sie können auch die Breite festlegen: 0px; auf diesem Wrapper-Div für einige Browser, um die Bildlaufleisten nicht anzuzeigen, und dann können Sie die absolute Positionierung für alle inneren Divs verwenden.

Dies funktioniert auch ERSTAUNLICH für die vertikale Ausrichtung Ihrer Inhalte mit top: 50% und margin-top. Prost!

  • Aber wie funktioniert das bei responsiven Seiten? Das ist meiner Meinung nach die schlechteste Lösung 🙁

    – Zimano

    6. Januar 2021 um 9:45 Uhr


  • @Zimano Ich gehe davon aus, dass Sie mit diesem umgangssprachlichen Begriff von reaktionsschnellen Seiten eine Art Website mit scrollbaren Inhalten meinen? Sie können divs immer an bestimmten Viewport- oder Scrollbar-Positionen ein- und ausblenden, indem Sie ein wenig Code und einfache Mathematik verwenden. Scheint für die Leute, die upvoted haben, großartig zu funktionieren

    – Alexandru

    6. Januar 2021 um 14:15 Uhr

  • Wenn Sie nicht wissen, für welche Bildschirmgrößen oder Ausrichtungen Sie entwickeln werden, wird es Ihnen nicht helfen, fest codierte Pixelbreiten sowohl in Ihrem CSS als auch in HTML zu haben. Wenn Sie eine Desktop-Site erstellen und die Auflösung und das Seitenverhältnis garantieren können und keine dynamische Neuskalierung durchführen, bietet dies möglicherweise eine Lösung!

    – Zimano

    6. Januar 2021 um 14:55 Uhr


  • @Zimano Es muss nicht fest codiert sein. Ich habe lediglich versucht, eine Lösung zu demonstrieren, die gut funktioniert. Sie können das Bild und sein CSS einfach programmgesteuert skalieren, basierend entweder auf der Breite oder der Höhe des Browsers, ganz nach Belieben

    – Alexandru

    6. Januar 2021 um 15:01 Uhr

Benutzer-Avatar
Mike Becatti

Hier ist eine Technik, die ich verwende und 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>

  • Aber wie funktioniert das bei responsiven Seiten? Das ist meiner Meinung nach die schlechteste Lösung 🙁

    – Zimano

    6. Januar 2021 um 9:45 Uhr


  • @Zimano Ich gehe davon aus, dass Sie mit diesem umgangssprachlichen Begriff von reaktionsschnellen Seiten eine Art Website mit scrollbaren Inhalten meinen? Sie können divs immer an bestimmten Viewport- oder Scrollbar-Positionen ein- und ausblenden, indem Sie ein wenig Code und einfache Mathematik verwenden. Scheint für die Leute, die upvoted haben, großartig zu funktionieren

    – Alexandru

    6. Januar 2021 um 14:15 Uhr

  • Wenn Sie nicht wissen, für welche Bildschirmgrößen oder Ausrichtungen Sie entwickeln werden, wird es Ihnen nicht helfen, fest codierte Pixelbreiten sowohl in Ihrem CSS als auch in HTML zu haben. Wenn Sie eine Desktop-Site erstellen und die Auflösung und das Seitenverhältnis garantieren können und keine dynamische Neuskalierung durchführen, bietet dies möglicherweise eine Lösung!

    – Zimano

    6. Januar 2021 um 14:55 Uhr


  • @Zimano Es muss nicht fest codiert sein. Ich habe lediglich versucht, eine Lösung zu demonstrieren, die gut funktioniert. Sie können das Bild und sein CSS einfach programmgesteuert skalieren, basierend entweder auf der Breite oder der Höhe des Browsers, ganz nach Belieben

    – Alexandru

    6. Januar 2021 um 15:01 Uhr

Benutzer-Avatar
Nikolaus

Alle Antworten beziehen sich auf die horizontale Ausrichtung.

Sehen Sie sich zum vertikalen Ausrichten mehrerer Inhaltselemente diesen Ansatz an:

<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>

1334060cookie-checkInhalt innerhalb eines div ausrichten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy