Web-Frontend
CSS-Tutorial
So zentrieren Sie horizontal und vertikal absolut positionierte Elemente
So zentrieren Sie horizontal und vertikal absolut positionierte Elemente
In diesem Artikel wird hauptsächlich die Methode der horizontalen und vertikalen Zentrierung absolut positionierter Elemente vorgestellt. Freunde, die sie benötigen, können sich gemeinsam 1.css ansehen, um eine Zentrierung zu erreichen
Nachteile: Breite und Höhe des Elements müssen im Voraus bekannt sein.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>2. CSS3 erreicht horizontale und vertikale Zentrierung
Hinweis: Egal des Elements Unabhängig von der Größe kann es zentriert werden. Diese Schreibmethode ist jedoch nur mit IE8 und höher kompatibel und kann auf mobilen Endgeräten ignoriert werden.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>3. Rand: automatische Gerätezentrierung
Weitere verwandte Artikel zu horizontalen und vertikalen Zentrierungsmethoden für absolut positionierte Elemente finden Sie auf der chinesischen PHP-Website!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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
1378
52
Wie ist die Leistung der 3060-Grafikkarte?
Jan 27, 2024 am 10:36 AM
Viele Gamer sind sehr neugierig auf die Grafikkarte 3060 und möchten ein 3060-Display kaufen, wissen aber nicht, auf welchem Niveau sich die RTX 3060 befindet. Tatsächlich liegt diese Grafikkarte auch auf einem relativ Mainstream-Niveau. Was ist das Niveau der 3060-Grafikkarte: Antwort: Mainstream-Niveau. Diese RTX3060-Grafikkarte erfreut sich bei Spielern großer Beliebtheit und ist ebenfalls im Angebot. Sie verfügt über die einzigartigen Vorteile der RTX30-Serie und ist sehr kostengünstig. Spieler mit höheren Anforderungen an die Spielgrafik können sich für diese Grafikkarte entscheiden. Einführung zur 3060-Grafikkartenerweiterung: Bildrate: Sie wird von den meisten Spielern geliebt. Sie verfügt über einen großen Videospeicher von 12 GB und ist sehr beliebt. Mit 12 GB großem Videospeicher können AAA-Meisterwerke flüssig und ohne Verzögerung wiedergegeben werden, und die Bildrate kann sogar 60 erreichen. Preis-Leistungs-Verhältnis: it
So stellen Sie die WPS-Tabellenzentrierung ein
Mar 19, 2024 pm 09:34 PM
Da die Funktionen von WPS immer leistungsfähiger werden, treten bei der Verwendung von Funktionen immer mehr Probleme auf. In WPS verwenden wir häufig WPS-Tabellen. Damit die Tabelle schön aussieht, müssen wir die Tabelle zu diesem Zeitpunkt zentrieren. Die Frage ist also: Wie zentrieren wir die WPS-Tabelle? Heute teile ich hier ein Tutorial, ich hoffe, es kann Ihnen helfen! Schrittdetails: 1. Ich werde es anhand praktischer Vorgänge erklären. Das Folgende ist ein einfaches Formular, das ich mit einem WPS-Formular erstellt habe. 2. Durch die Druckvorschau können wir feststellen, dass sich die WPS-Tabelle standardmäßig auf der linken Seite befindet. Was ist, wenn wir den Tisch zentrieren wollen? 3. Zu diesem Zeitpunkt müssen wir in der [Symbolleiste] auf [Seitenlayout] klicken.
Mar 18, 2024 pm 03:21 PM
Als neuer Star auf dem Mobiltelefonmarkt hat das Kirin 9000s in diesem Jahr viel Aufmerksamkeit auf sich gezogen. Da der Wettbewerb auf dem Smartphone-Markt immer härter wird, hat die Kirin-Serie als Flaggschiff-Prozessor von Huawei schon immer viel Aufmerksamkeit auf sich gezogen. Wie ist die Leistung und das Niveau des Kirin 9000 als neuester Prozessor? Im Folgenden wird der Kirin 9000 bewertet und seine Vor- und Nachteile unter verschiedenen Gesichtspunkten analysiert. Was zunächst die Leistung betrifft, wird der Kirin 9000s in einem fortschrittlichen 5-nm-Prozess hergestellt und integriert die neueste Co. von ARM
Wie zentriere ich ein Div in einem anderen Div?
Sep 08, 2023 am 11:13 AM
Einführung Die zentrale Ausrichtung von Divs ist einer der wichtigsten Aspekte der Front-End-Entwicklung. In diesem Artikel werden wir uns mit der Technik befassen, mit der mithilfe von HTML und CSS ein Div in einem anderen Div platziert wird. In diesem Tutorial werden wir ein übergeordnetes Div haben, das untergeordnete Divs haben sollte. Unsere Aufgabe besteht darin, das untergeordnete Div in der Mitte des übergeordneten Div zu platzieren. Die Verwendung der Transform-Übersetzung und der Positionssyntax ist keine sehr beliebte Methode, um ein Div in einem anderen Div zentriert auszurichten. Syntax left:50%;top:50%;Transform:translate(-50%,-50%);above Die Syntax erledigt das folgende - Die CSS-Regel „left:50%;“ legt die horizontale Position des Elements fest
Erstellen Sie horizontal scrollbare Abschnitte in CSS
Aug 29, 2023 am 09:29 AM
Horizontal scrollbare Abschnitte sind ein gängiges Webdesign-Muster, das zur Anzeige von Inhalten verwendet wird, die über die Breite des Ansichtsfensters hinausgehen. Dieses Designmuster ermöglicht Benutzern das horizontale Scrollen und bietet so eine einzigartige und ansprechende Möglichkeit, große Bilder, Galerien, Zeitleisten, Karten und andere Inhalte anzuzeigen. Dies wird durch die Verwendung von CSS-Eigenschaften wie overflow-x:auto oder overflow-x:scroll erreicht. Dies nutzt native Browserfunktionen für horizontales Scrollen und reagiert auf alle Geräte. Ermöglicht eine einfache Navigation und Erkundung von Inhalten. Es sind keine zusätzlichen Bibliotheken oder Plugins erforderlich. Der Algorithmus verwendet die Klasse „Container“, um Containerelemente zu definieren. Setzen Sie die Eigenschaft „overflow-x“ des Containers auf „auto“, um horizontales Scrollen zu ermöglichen. Container
Anleitung: So ändern Sie die Größe und zentrieren Sie Win11-Taskleistensymbole
Jan 03, 2024 am 08:17 AM
Win11 bringt eine völlig neue Benutzeroberfläche mit sich, einschließlich Änderungen an der Taskleiste. Viele Benutzer sind jedoch der Meinung, dass die Taskleistensymbole zu groß sind und sich bei der Verwendung nicht daran gewöhnen . Kommen Sie und lernen Sie gemeinsam die kleinen Operationsmethoden. So verkleinern Sie das mittlere Taskleistensymbol in Win11: 1. Zuerst müssen Sie den Registrierungseditor öffnen. 2. Erweitern Sie dann: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced\. 3. Erstellen Sie dann rechts einen neuen DWORD-Wert „TaskbarSi“ und fügen Sie ihn hinzu
So zentrieren Sie ein Textfeld in HTML
Feb 19, 2024 pm 11:01 PM
Um ein HTML-Textfeld zu zentrieren, sind spezielle Codebeispiele erforderlich. Im Webdesign ist die Ausrichtung von Elementen in der Mitte eine häufige Layoutanforderung. Für HTML-Textfelder gibt es mehrere Möglichkeiten, sie zentriert anzuzeigen. Im Folgenden stellen wir Ihnen eine häufig verwendete Zentrierungsmethode im Detail vor und fügen spezifische Codebeispiele bei. Methode 1: Verwenden Sie das Attribut „centering“ im CSS-Stylesheet. Um eine zentrierte Anzeige des Textfelds zu erreichen, können Sie das Attribut „text-align“ im CSS-Stylesheet verwenden. Stellen Sie das übergeordnete Containerelement, in dem sich das Textfeld befindet, auf zentrierte Ausrichtung ein.
Teilen von Front-End-Fähigkeiten: Verwenden Sie CSS3 fit-content, um Elemente horizontal zu zentrieren
Sep 09, 2023 pm 01:36 PM
Teilen von Frontend-Fähigkeiten: Verwenden Sie CSS3fit-content, um Elemente horizontal zu zentrieren. Bei der Frontend-Entwicklung stoßen wir häufig auf Situationen, in denen wir ein Element horizontal zentrieren müssen. Dieser Effekt kann leicht mit der fit-content-Eigenschaft von CSS3 erreicht werden. In diesem Artikel wird die Verwendung des fit-content-Attributs vorgestellt und Codebeispiele bereitgestellt. Das Attribut fit-content ist ein Längenwert relativ zum übergeordneten Container des Elements, der die Breite des Elements automatisch basierend auf der tatsächlichen Größe des Inhalts berechnen kann. Durch Konvertieren des Elements
