CSS-Techniken zur Steuerung der Elementausrichtung

Das übergeordnete Element muss ein Blockelement sein, das entsprechend den untergeordneten Elementen in die folgenden Typen unterteilt ist:

1. Das untergeordnete Element ist ein Inline-Element: wie zum Beispiel: a, span

a. Horizontal zentriert: Auf dem übergeordneten Element festlegen: text-align:center;

Vertikale Zentrierung: Stellen Sie die Zeilenhöhe auf dem untergeordneten Inline-Element so ein, dass sie mit der des übergeordneten Elements übereinstimmt -height

.box1 {
			width: 200px;
			height: 200px;
			background-color: #FFFF0A;
			text-align: center;  /*可以使内部行内元素水平居中*/
		}
		.box1 a {
			line-height: 200px;  /*子元素设置行高与父元素高度相同*/
		}
<div class="box1">
     <a href="">PHP中文网</a>
</div>

2. Untergeordnetes Element Es handelt sich um mehrzeiligen Inline-Text

a. Vertikale Zentrierung: Einstellung des übergeordneten Elements: display:table-cell;vertikal-align:middle

.box2 {
			width: 200px;
			height: 200px;
			background-color: #FC0107;
			text-align: center;  /*可以使内部多行行内元素水平居中*/
			/*以下二个声明可以使多行文本垂直居中*/
			display: table-cell;  /*设置显示方式为表格单元格*/
			vertical-align: middle; /*设置该单元格内的元素垂直居中*/
		}
<div class="box2">
<span>php中文网</span><br>
<span>www.php.cn</span>
</div>

3. Das untergeordnete Element ist ein Blockelement:

a. Horizontale Zentrierung: Das untergeordnete Element legt das linke und fest rechts automatisch: Rand: automatisch;

b. Vertikale Zentrierung: mit mehreren Zeilen Die gemeinsame Textverarbeitungsmethode ist dieselbe: Anzeige: Tabellenzelle; vertikal ausrichten: Mitte

.box3 {
			width: 200px;
			height: 200px;
			background-color: #66CCFF;
			/*以下二个声明可以使块级子元素垂直居中*/
			display: table-cell;  /*设置显示方式为表格单元格*/
			vertical-align: middle; /*设置该单元格内的元素垂直居中*/			
		}
		.box3 .child {
			width: 100px;
			height: 100px;
			background-color: #F4FF0A;
			margin: auto;  /*水平居中*/
		}
<div class="box3">
<div class="child"></div>
</div>

4. Das untergeordnete Element ist ein Blockelement mit variabler Breite: die häufigste Paging-Navigation

a. Horizontal zentriert: Das untergeordnete Element wird in ein Inline-Element umgewandelt und das übergeordnete Element hinzugefügt: text-align: Mitte

b. Vertikale Zentrierung: Zeilenhöhe kann zum Paging hinzugefügt werden ul line-height=parent.height

Untere Mitte: häufiger verwendet, im Einklang mit der vertikalen Verarbeitungsmethode von mehrzeiliger Inline-Text, vertikal ausgerichtet: unten;

.box4 {
			width: 200px;
			height: 200px;
			background-color: #FD6FCF;
			text-align: center;  /*可以使行内元素水平居中*/
			/*以下二个声明可以使块级子元素垂直居中*/
			display: table-cell;  /*设置显示方式为表格单元格*/
			vertical-align:bottom; /*设置该单元格内的元素底边居中*/	
		}
		.box4 ul {
			margin: 0;
			padding: 0;
			/*line-height: 200px;*/
		}
		.box4 li {
			list-style: none;
			display: inline;
		}
<div class="box4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>

Das obige ist der detaillierte Inhalt vonCSS-Techniken zur Steuerung der Elementausrichtung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!