Wie richtet man ein Blockelement zentriert aus?
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.
Blockelemente zentrieren
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.
Syntax
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.
Margin-Eigenschaften
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.
Grammatik
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.
Beispiel
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 id="Hi-this-an-example">Hi, this an example</h1>
<p class="para">We are aligning the block elements to the text.</p>
<h1 id="Welcome">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.
Beispiel
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 lazy" src="/static/imghw/default1.png" data-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.
Fazit
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1658
14
1415
52
1309
25
1257
29
1231
24
Google -Schriftarten variable Schriftarten
Apr 09, 2025 am 10:42 AM
Ich sehe, dass Google -Schriftarten ein neues Design (Tweet) ausgelöst haben. Im Vergleich zur letzten großen Neugestaltung fühlt sich dies viel iterativer an. Ich kann den Unterschied kaum erkennen
So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScript
Apr 11, 2025 am 11:29 AM
Haben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr
HTML -Datenattributehandbuch
Apr 11, 2025 am 11:50 AM
Alles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.
Ein Beweis für das Konzept, um Sass schneller zu machen
Apr 16, 2025 am 10:38 AM
Zu Beginn eines neuen Projekts erfolgt die SASS -Zusammenstellung im Blinzeln eines Auges. Dies fühlt sich gut an, besonders wenn es mit Browsersync kombiniert ist, das nachlädt
Wie wir eine statische Site erstellt haben, die Tartan -Muster in SVG erzeugt
Apr 09, 2025 am 11:29 AM
Tartan ist ein gemustertes Tuch, das normalerweise mit Schottland verbunden ist, insbesondere mit ihren modischen Kilts. Auf Tartanify.com haben wir über 5.000 Tartan gesammelt
So erstellen Sie Vue -Komponenten in einem WordPress -Thema
Apr 11, 2025 am 11:03 AM
Mit der Inline-Template-Anweisung können wir reichhaltige Vue-Komponenten als fortschreitende Verbesserung gegenüber vorhandenem WordPress-Markup erstellen.
PHP ist A-OK für die Vorlagen
Apr 11, 2025 am 11:04 AM
PHP -Vorlagen erhält oft einen schlechten Rap für die Erleichterung von unterdurchschnittlichem Code - aber das muss nicht der Fall sein. Schauen wir uns an, wie PHP -Projekte eine Basis durchsetzen können
Programmieren von Sass, um zugängliche Farbkombinationen zu erstellen
Apr 09, 2025 am 11:30 AM
Wir sind immer darauf aus, das Web zugänglicher zu machen. Farbkontrast ist nur Mathematik, sodass SASS dazu beitragen kann, Kantenfälle zu bedecken, die Designer möglicherweise verpasst haben.
