Methode: 1. Verwenden Sie den Stil „text-align:center“, um eine horizontale Zentrierung zu erreichen. 2. Verwenden Sie den Stil „line-height: line height;“, um eine vertikale Zentrierung zu erreichen. 3. Verwenden Sie den Stil „align-items:center;justify-content:center“, um eine horizontale und vertikale Zentrierung zu erreichen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was sind die Ausrichtungsmethoden in CSS
1. Horizontale Zentrierung
Horizontale Zentrierung von Inline-Elementen
Wenn das Element auf ein Inline-Element wie Text, Bild usw ., im übergeordneten Element Setzen Sie text-align:center, um eine horizontale Zentrierung von Inline-Elementen zu erreichen, und stellen Sie die Anzeige von untergeordneten Elementen auf „inline-block“ ein, damit untergeordnete Elemente zu Inline-Elementen werden
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div></div>
<style>
.parent{text-align: center;}
.child{display: inline-block;}
</style>Horizontale Zentrierung von Blockelementen (behoben). width)
Wenn es sich bei dem festzulegenden Element um ein Element auf Blockebene mit fester Breite handelt, funktioniert text-align: center nicht. Die Zentrierung kann erreicht werden, indem der Wert „linker und rechter Rand“ auf „Auto“ gesetzt wird.
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
<style>
.child{
width: 200px;
margin: 0 auto;
}
</style>Horizontale Zentrierung von Blockelementen (unbestimmte Breite)
Bei der tatsächlichen Arbeit werden wir auf die Notwendigkeit stoßen, die Zentrierung für „Elemente auf Blockebene mit variabler Breite“ festzulegen, beispielsweise für die Seitennavigation auf Webseiten , weil Die Anzahl der Paginierungen ist undefiniert, daher können wir die Flexibilität nicht durch Festlegen der Breite einschränken.
Sie können text-align:center direkt für Elemente auf Blockebene mit variabler Breite festlegen, um dies zu erreichen, oder Sie können text-align:center zum übergeordneten Element hinzufügen, um den Zentrierungseffekt zu erzielen.
Wenn die Breite des Blockebenenelements mit variabler Breite keine Zeile einnimmt, können Sie die Anzeige auf Inline-Typ oder Inline-Block einstellen (auf Inline-Elementanzeige oder Inline-Blockelement einstellen)
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<style>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
</style>2 Zentrierung
Das Gleiche gilt für die vertikale Zentrierung. Legen Sie zunächst zwei Bedingungen fest: Das übergeordnete Element ist ein Box-Container und die Höhe wurde festgelegt. Das untergeordnete Element ist ein Inline-Element und die Höhe wird unterstützt In diesem Fall müssen Sie die Zeilenhöhe des übergeordneten Elements auf seine Höhe festlegen, um die untergeordneten Elemente vertikal zu zentrieren.
<div class="wrap line-height">
<span class="span">111111</span></div>
<style>
.wrap{
width:200px ;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span{
background: red;
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="mydiv">
<span>测试</span>
</div>
<style type="text/css">
.mydiv{
width:200px;
height:100px;
border:1px solid black;
display:flex;
align-items:center;
justify-content:center;
}
</style>
</body>
</html>Programmiervideo! !
Das obige ist der detaillierte Inhalt vonWas sind die Ausrichtungsmethoden in CSS?. 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)
