要素の配置を制御するための CSS テクニック

親要素はブロック要素である必要があり、子要素に応じて次のタイプに分けられます:

1. 子要素はインライン要素です: a、span

a. 水平方向のセンタリング: オンに設定します。親要素: text-align: center;

b. 垂直方向の中央揃え: インライン子要素の行の高さを親要素と同じに設定します: line-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。 line inline text

a. 水平方向の中央揃え: 親要素は text-align を設定します

b. 垂直方向の中央揃え: 親要素の設定: display:table-cell;vertical-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.ブロック要素:

a. 水平方向の中央揃え: 子要素が自動的に左右に設定されます: margin: auto;

b. 垂直方向の中央揃え: 複数行のインライン テキストの処理と一致します: 表示: table-cell; : middle

.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. 子要素は可変幅のブロック要素です: 最も一般的なページング ナビゲーション

a. 水平方向の中央揃え: 子要素がインライン要素に変換され、親要素が追加されます: text-align: center

b. 垂直方向のセンタリング: ページング ul line-height=parent.height に行の高さを追加できます

c. 下部のセンタリング: 複数行のインライン テキストの垂直方向の処理方法、vertical-align と一致して、より一般的に使用されます。 :bottom;

りー

以上が要素の配置を制御するための CSS テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。