Richten Sie den Inhalt innerhalb eines Div aus

152

Ich verwende CSS-Stil Text-Align, um Inhalte in einem Container in HTML auszurichten. Dies funktioniert einwandfrei, wenn der Inhalt Text oder der Browser IE ist. Aber sonst funktioniert es nicht.

Wie der Name schon sagt, wird es im Wesentlichen zum Ausrichten von Text verwendet. Die Align-Eigenschaft ist längst veraltet.

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

html css text-align

— Hemanshu Bhojak
quelle

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

— Shoban

Sie sollten ein Beispiel für Ihr Markup geben, damit die Leute wissen, was Sie versuchen. Ansonsten ist Ihre Frage nicht eindeutig.

— Levik

216

Textausrichtung richtet Text und anderen Inline-Inhalt aus. Blockelementkinder werden nicht ausgerichtet.

Dazu möchten Sie dem Element, das ausgerichtet werden soll, eine Breite mit dem linken und rechten Rand 'auto' geben. Dies ist die standardkonforme Methode, die überall außer in IE5.x funktioniert.

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

Damit dies in IE6 funktioniert, müssen Sie sicherstellen, dass der Standardmodus aktiviert ist, indem Sie einen geeigneten DOCTYPE verwenden.

Wenn Sie den IE5 / Quirks-Modus wirklich unterstützen müssen, was Sie heutzutage eigentlich nicht sollten, können Sie die beiden verschiedenen Ansätze zur Zentrierung kombinieren:

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

(Natürlich lassen sich Stile am besten in ein Stylesheet einfügen, aber die Inline-Version dient nur zur Veranschaulichung.)

— Bobince
quelle

2

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

— Artem

Ich habe <div style = "width: 100%; margin: 0 auto;"> Hallo </ div>

— Aamol

9

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 auch Artem Russakovskii erwähnte, lesen Sie den Originalartikel von Mattew James Taylor für eine vollständige Beschreibung.

— Mahdi
quelle

9

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

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

— krithi k
quelle

1

Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.

— Andreas

Entschuldigung, der

— obige

6

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

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

Ich werde ein Wrapper-Div erstellen, das eine absolute Position und einen linken Wert von 50% hat ... also beginnt dieses Div jetzt in der Mitte des Bildschirms und subtrahiere dann die Hälfte des gesamten Inhalts der Div-Breite ... und ich bekomme SCHÖN skalierte Inhalte ... 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 ein div-Tag eingeschlossen ist, das diese Wrapper-Klasse verwendet, und dass der gesamte Inhalt 200px breit ist):

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

BEARBEITEN: Ich habe vergessen hinzuzufügen ... Sie können auch die Breite einstellen: 0px; In diesem Wrapper-Div werden für einige Browser die Bildlaufleisten nicht angezeigt. Anschließend können Sie die absolute Positionierung für alle inneren Divs verwenden.

Dies funktioniert auch ERSTAUNLICH, um Ihren Inhalt vertikal auszurichten, wobei top: 50% und margin-top verwendet werden. Prost!

— Alexandru
quelle

2

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>

Erweitern Sie das Snippet

— Bluthund
quelle

2

Nachfolgend sind die Methoden aufgeführt, die für mich immer funktioniert haben

Mit dem Flex-Layout-Modell :

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

Wenn Sie mehr als ein untergeordnetes Element haben und die Anordnung steuern möchten (Spalte / Zeilen), können Sie auch eine flex-directionEigenschaft hinzufügen .

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>

Erweitern Sie das Snippet

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>

Erweitern Sie das Snippet

— nmak18
quelle

1

Alle Antworten sprechen von horizontaler 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>

Erweitern Sie das Snippet

— Nicolas
quelle

-2

Nur ein weiteres Beispiel mit HTML und CSS:

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

— Diogo
quelle

27

Nichts von dem, was Sie geschrieben haben, ist spezifisch für ASP.NET. Es ist nur HTML und Inline-CSS. Wollten Sie ein Serversteuerelement mit Eigenschaften ausschreiben?

— Webworm

1

Fest. In der Antwort werden nun die richtigen Technologien erwähnt.

— Jony