Schwebende Elemente mit CSS zentrieren
CSS wird verwendet, um das Aussehen der HTML-Elemente auf den Bildschirmen zu gestalten und mehrere Layouts von Webseiten gleichzeitig zu steuern. Dieser Artikel behandelt die CSS-Eigenschaften float und center.
Schwebende Elemente mit CSS zentrieren
Die CSS-Eigenschaft float wird beim Positionieren und Formatieren von Inhalten des HTML-Dokuments verwendet. Standardmäßig haben float-Properties nur vier Werte: left, right, none , inherit.
Die Werte links und rechts lassen Elemente links bzw. rechts vom Container schweben.
Der Wert none wird verwendet, damit Elemente nicht schweben. Schließlich lässt der Wert inherit die Eigenschaft den Float-Wert ihres übergeordneten Elements erben.
Wir können den center-Wert nicht mit Float-Elementen verwenden. Daher werden wir in diesem Artikel Methoden zum Zentrieren von Float-Elementen untersuchen.
Methode 1 zum Zentrieren von schwebenden Elementen mit CSS
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
Im obigen Beispiel wird als erster Schritt eine HTML-Klasse container erstellt; darin heißt eine weitere Klasse float_center. Wir können Inhalte oder Elemente hinzufügen, die wir in beiden Klassen schweben und zentrieren möchten.
.container{
border: 1px solid red;
float: left;
position: relative;
left: 40%;
}
Danach sollten CSS-Eigenschaften zur Klasse container hinzugefügt werden. Der obige CSS-Code setzt die Eigenschaft float und setzt den Wert auf left, damit eine Containerklasse die Breite je nach Inhalt ändert.
Wir können eine Rand-Eigenschaft um die Elemente herum hinzufügen. Außerdem sollte die Position relativ sein, was bedeutet, dass die Elemente relativ zu ihrer normalen Position platziert werden.
Die Eigenschaft links führt dazu, dass er sich aus seiner normalen Position bewegt.
In diesem Beispiel haben wir eine links-Eigenschaft auf einen Wert von 40 % gesetzt, sodass der Inhalt um 40 % von seiner normalen Position verschoben wird.
Als Ergebnis des CSS-Codes können wir die obige Ausgabe erhalten. Auf einen Blick können wir den zentrierten linken Rand des Containers sehen.
Das float-Element ist bereits zentriert, aber wir sollten den folgenden CSS-Code hinzufügen, damit es erfolgreich ist.
.container{
float: left;
position: relative;
left: 50%;
}
.float_center{
border: 1px solid red;
text-align: center;
background-color: bisque;
padding-right: 20px;
font-size: 25px;
margin-top: 50px;
float: left;
position: relative;
left:-50% ;
}
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>CSS float center</h1>
<div class="container">
<div class="float_center">
<ul>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
<li style="list-style-type: none; ">content</li>
</ul>
</div>
</div>
</body>
</html>
In diesem Code haben wir Stile für die Klasse float_center hinzugefügt. Wir sollten die Eigenschaft float auf den Wert left setzen.
Die Position sollte relativ zu einer übergeordneten Klasse sein. Die Eigenschaft links sollte -50% sein, um die schwebenden Elemente zu zentrieren.
Abgesehen davon können wir den Floating-Inhalt mit Eigenschaften wie border, text-align, background-color, padding, font-size und margin-Eigenschaften gestalten. Diese Eigenschaften können die Bedürfnisse eines Designers definieren.
Ausgang:
Dies ist das Endergebnis des obigen Float-Center-Beispiels. In ähnlicher Weise können wir schwebende Elemente mit dem obigen Code an die Mitte anpassen.
Methode 2 zum Zentrieren von schwebenden Elementen mit CSS
In Anbetracht einer anderen Verwendung der Float-Center-Methode können wir die Paginierung identifizieren. Früher galt es für Websites mit vielen Seiten.
Beim Erstellen von Paginierungen verwenden wir häufig die Eigenschaft float zum Ausrichten. Es ist wichtig, wie die Paginierung mit der Eigenschaft float zentriert werden kann.
Um dies zu lösen, können wir die folgenden CSS-Eigenschaften und -Werte verwenden.
Beispielcode:
<!DOCTYPE html>
<head>
<title>Pagination</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2 style="text-align: center;">Float center pagination</h2>
<div class="center">
<div class="pagination">
<a href="#">«
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</div>
</body
Dies ist der HTML-Code, der zwei Klassen hat, nämlich center und pagination. In diesem HTML-Code setzen wir fünf href-Elemente mit den Links jeder Seite.
In Anbetracht der obigen Konsequenz können wir sehen, dass die Paginierungselemente nicht zentriert oder schwebend sind. Mit dem folgenden CSS-Code können wir die Paginierung Float und Centered festlegen.
.center{
text-align: center;
}
.pagination{
display: inline-block;
margin: 50px;
}
.pagination a{
color: black;
float: left;
padding: 9px 18px;
text-decoration: none;
border: 1px solid black;
border-radius: 5px;
background-color: #efeded;
margin: 0 4px;
}
.pagination a:hover{
background-color: #7d656f;
}
Wir können eine Eigenschaft text-align auf den Wert center setzen, um die Mitte zur Paginierung zu machen. Normalerweise kann die Paginierung mit der Eigenschaft float neben jedem Element platziert werden.
Wie Sie sehen können, wird die Klasse Paginierung des obigen Codes als Inline-Block angezeigt und der Rand auf 50 Pixel gesetzt.
Innerhalb der Paginierungsklasse des HTML-Codes haben wir sieben href-Elemente definiert. Im CSS-Code haben wir einen Paginierung a-Selektor erstellt, um diese href-Elemente zu gestalten.
Die Eigenschaft float wird hauptsächlich auf den Wert left gesetzt, um das Paginierungselement nebeneinander zu platzieren.
Die Eigenschaft color definiert die Schriftfarbe der Paginierungselemente. Die Eigenschaft padding schafft Platz innerhalb der Elemente und ihrer Umrandungen, die Eigenschaft border-radius rundet die Umrandungsecken ab.
Die Eigenschaften background-color, margin, text-decoration und border, die zum Stylen von href-Elementen verwendet werden. Schließlich wird den Paginierungselementen die Eigenschaft hover hinzugefügt, die die Hintergrundfarbe ändert.
Mit dem obigen CSS-Code können wir die folgende Float-Center-Paginierungshilfe erhalten.
Die beiden oben genannten Methoden können verwendet werden, um schwebende Elemente zu zentrieren. Die erste Methode ist für jedes Szenario geeignet, das schwebende Elemente besitzt.
Der zweite kann alle Arten von Paginierungen erstellen.
Alternative Möglichkeiten zum Zentrieren schwebender Elemente
Es wird dringend empfohlen, die Eigenschaft float nicht zu verwenden, um einzeiligen Text zu zentrieren. Wenden Sie text-align:center auf den umgebenden Block an.
Außerdem können wir einen Block oder ein Element zentrieren, indem wir einfach den linken und rechten Rand auf ähnliche Werte setzen. Wenn der Block eine freie Breite hat, können wir den rechten und linken Rand auf den Wert auto setzen.
Abschluss
Dieser Artikel befasst sich mit dem Zentrieren von schwebenden Blöcken oder Elementen in CSS. Wir haben zwei Methoden erwähnt, die auf alle schwebenden Elemente oder Blöcke angewendet werden können.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.