CSS-Stileinstellungen
1. Einstellung der horizontalen Zentrierung
Einstellung der Inline-Elementzentrierung: Wenn das festgelegte Element ein Inline-Element wie Text oder Bild ist, wird die horizontale Zentrierung erreicht, indem text-align:center auf das übergeordnete Element festgelegt wird. Das Codebeispiel lautet wie folgt:
HTML代码
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
CSS代码
<style>
.txtCenter{
text-align:center;
}
</style>Zentrierungseinstellung von Blockelementen mit fester Breite: Elemente, die die beiden Bedingungen „feste Breite“ und „Block“ erfüllen, können zentriert werden, indem der Wert „linker und rechter Rand“ auf festgelegt wird "Auto". Das Codebeispiel lautet wie folgt:
HTML代码
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
CSS代码
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>Zentrierung von Blockelementen mit variabler Breite:
Das Hinzufügen des Tabellen-Tags nutzt die Längenanpassungsfähigkeit von Das Tabellen-Tag - --Das heißt, die Länge ist nicht definiert und die Länge des übergeordneten Elementkörpers ist nicht standardmäßig festgelegt (die Länge der Tabelle wird durch die Länge des darin enthaltenen Textes bestimmt), sodass sie als a betrachtet werden kann Blockelement mit fester Breite, und dann wird die zentrierte Randmethode mit fester Breite verwendet. Das Codebeispiel lautet wie folgt:
HTML代码
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
CSS代码
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>2. Anzeige festlegen: Inline-Methode: Ändern Sie die Anzeige von Elementen auf Blockebene in den Inline-Typ (stellen Sie sie auf Inline-Elementanzeige ein) und verwenden Sie dann text-align: zentrieren, um den Zentriereffekt zu erzielen. Der Code lautet wie folgt:
HTML代码
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
CSS代码
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>3. Position:relativ und links:50% festlegen: Durch Festlegen von float auf das übergeordnete Element und anschließendes Festlegen von position:relativ und links:50% auf das übergeordnete Element , legt das untergeordnete Element position: relative und left: -50 % fest, um eine horizontale Zentrierung zu erreichen. Der Code lautet wie folgt:
HTML代码
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
CSS代码
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>2. Vertikale Zentrierungseinstellung
Eine einzelne Textzeile mit einer bestimmten Höhe des übergeordneten Elements:
Vertikale Zentrierungsmethode von eine einzelne Textzeile mit einer bestimmten Höhe des übergeordneten Elements. Dies wird erreicht, indem die Höhe und die Zeilenhöhe des übergeordneten Elements konsistent eingestellt werden. (height: die Höhe des Elements, line-height: Wie der Name schon sagt, bezieht sich die Zeilenhöhe (Zeilenabstand) auf den Abstand zwischen den Grundlinien zwischen den Zeilen im Text). Der Code lautet wie folgt:
HTML代码
<div class="container">
hello, world!
</div>
CSS代码
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>Mehrere Textzeilen mit einer bestimmten Höhe des übergeordneten Elements:
1 Verwenden Sie das Tag „Insert Table“ (einschließlich tbody, tr, td). und setze Vertical-Align: Middle. Es gibt in CSS ein Attribut für die vertikale Zentrierung namens „vertikal-align“. Wenn das übergeordnete Element diesen Stil festlegt, ist er für alle untergeordneten Elemente vom Inline-Block-Typ nützlich. Der Code lautet wie folgt:
HTML代码
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
CSS代码
table td{height:500px;background:#ccc}
/*因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。*/2. In Chrome, Firefox und IE8 oder höher können Sie die Anzeige von Elementen auf Blockebene auf Tabellenzelle einstellen (auf Tabellenzellenanzeige einstellen), aktivieren das Vertical-Align-Attribut. Beachten Sie jedoch, dass IE6 und 7 diesen Stil nicht unterstützen und die Kompatibilität relativ schlecht ist. Der Code lautet wie folgt:
HTML代码
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
CSS代码
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>Der Vorteil dieser Methode besteht darin, dass keine zusätzlichen bedeutungslosen Tags hinzugefügt werden müssen, aber die Mängel liegen auch auf der Hand. Die Kompatibilität ist nicht sehr gut, und das ist auch nicht der Fall kompatibel mit IE6 und 7 und die Anzeige wird auf diese Weise geändert. Der Block wurde zu einer Tabellenzelle, wodurch die Natur der ursprünglichen Blockelemente zerstört wurde.
3. Ändern Sie implizit den Anzeigetyp
Wenn es sich um ein Element handelt (unabhängig vom vorherigen Elementtyp, außer display:none), legen Sie einen der folgenden 2 Sätze fest:
1. Position: absolut
2. float: left oder float:right
, der Anzeigetyp des Elements ändert sich automatisch in display:inline-block (Blockelement). Natürlich können Sie die Breite und Höhe des Elements festlegen, und die Standardbreite belegt nicht das übergeordnete Element. Der Code lautet wie folgt:
HTML代码
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
CSS代码
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
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
1379
52
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So sehen Sie das Datum der Bootstrap
Apr 07, 2025 pm 03:03 PM
ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.
