Die Margin-Eigenschaft in CSS kann verwendet werden, um Blockelemente (wie Divs) horizontal zu zentrieren. Wir können die Breite des Elements festlegen, wodurch verhindert wird, dass sich der Container ausdehnt. Das Blockelement nimmt eine ganze Zeile Platz ein, was andere Elemente dazu zwingt, die nächste Zeile zu belegen, da das Blockelement 100 % des Containers besitzt.
Jedes Element auf einer Webseite, das eine neue Zeile beginnt, wird als Element auf Blockebene betrachtet. Zum Beispiel Titel-Tag, Div usw.
Diese Blockelemente nehmen die gesamte Breite der Webseite ein. Nehmen wir an, wir haben ein Element auf unserer Webseite, das nur 10 % der Webseite einnimmt, aber wenn es ein Blockelement wäre, würde es 100 % der Breite selbst einnehmen.
Wir können das Anzeigeattribut eines bestimmten Elements ändern, indem wir den Wert auf das Blockattribut setzen.
Schauen wir uns die Anzeigeeigenschaften an -
display: value;
Das Obige ist die Syntax des Anzeigeattributs, mit der das Erscheinungsbild bestimmter Elemente auf einer Webseite definiert werden kann.
Da wir nun wissen, wie sich das Blockelement verhält, verwenden wir die Eigenschaft margin, um das Element horizontal auszurichten.
Das Attributmargin steuert die Position des Blockelements. Wir verwenden diese Eigenschaft so, dass das Element zentriert ist, da Ränder das Element sowohl in der horizontalenals auch in der vertikalenEbene steuern.
Sehen wir uns die Syntax der Margin-Eigenschaft an -
margin: value;
Hier ist die Syntax des Randattributs angegeben und Ränder sollten von links nach rechts angegeben werden, damit das Blockelement zentriert ist. Mit dem Auto-Wert können Ränder so eingestellt werden, dass Blockelemente automatisch zentriert werden.
HINWEIS – Es gibt ein Attribut text-align und seinen Wert center. Diese Eigenschaft kann mit dieser Methode nicht verwendet werden, da sie zum Zentrieren von Nicht-Block-Elementen wie Absätzen, Span-Tags usw. verwendet wird.
Um die Funktionalität dieser Eigenschaft besser zu verstehen, schauen wir uns ein Beispiel an, in dem wir im Abschnitt „CSS-Eigenschaften“ einige Header und ein Div mit auf „Auto“ eingestellten Rändern hinzufügen und diese dann an zwei inneren Blöcken ausrichten. Die verknüpften Blöcke werden zusammen verschoben. Unterschiedliche Div-Farben geben Aufschluss über unterschiedliche Anzeigen, z. B. Inline-Blöcke usw.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of text alignment to the center</title>
<style>
*{
background-color:black;
}
.para {
color:white;
text-align: center;
}
.testinline {
padding: 10px;
border: 2px solid blue;
}
h1 {
font-size: 35px;
color: white;
width: fit-content;
margin: auto;
}
.container {
background-color: lightblue;
margin: auto;
border: solid red 1px;
padding: 15px 10px;
text-align: center;
width: fit-content;
}
.good-night {
padding: 10px;
border: 2px solid blue;
color: white;
display: inline-block;
}
.good-morning {
padding: 10px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>Hi, this an example</h1>
<p class="para">We are aligning the block elements to the text.</p>
<h1>Welcome</h1>
<div class="container">
How is your day Going
</div>
<div class="good-morning">
<div style="display: inline-block" class="testinline">
Good Morning
</div>
<div style="display: inline-block" class="testinline">
Good Night
</div>
</div>
</body>
</html>
In der Ausgabe oben können Sie sehen, dass die Titel- und div-Elemente zusammen mit den Absatz-Tags gedreht werden. Wir verwenden das Attribut text-align, um das Absatz-Tag in der Mitte auszurichten, und das Attribut „Rand“ und setzen seinen Wert auf „Auto“, um das Blockelement auszurichten.
Im Programm unten erhalten wir ein Bild und ein Nicht-Block-Element neben dem Bild. Anschließend stellen wir die Anzeige des Bildes auf „Block“ ein, stellen seine Ränder auf „Automatisch“ ein, richten es dann in der Mitte am Titel aus und setzen die Anzeigeeigenschaft des Absatzes auf „Inline-Block“.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example for text alignment </title>
<style>
h1 {
margin: auto;
width: 30%;
font-size: 24px;
margin-bottom: 8px;
background-color: black;
color: white;
}
.image{
display: block;
margin: auto;
}
</style>
</head>
<body>
<h1>
Example for setting the block element
</h1>
<img class="image" src="https://www.tutorialspoint.com/images/logo.png" alt="Wie richtet man ein Blockelement zentriert aus?" >
<p style="display: inline-block;">
Hi this is another example for aligning the block element to the centre.
</p>
</body>
</html>
In der Ausgabe können Sie sehen, dass sich das Bild in der Mitte und der Text in der nächsten Zeile befindet, genau wie wir es möchten.
Das Ausrichten von Blockelementen in der Mitte ist eine großartige Möglichkeit, ein ausgewogenes und symmetrisches Layout zu erstellen. Sie können eine beliebige Anzahl von Elementen in Ihrem Design schnell und einfach ausrichten, indem Sie automatische Werte für die Textausrichtung oder den Rand verwenden. Mit ein wenig Übung können Sie diese Techniken sicher anwenden!
Das obige ist der detaillierte Inhalt vonWie richtet man ein Blockelement zentriert aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
