適応型センタリング

1. フォームの中央揃え

position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */

簡単な分析:

位置: 固定位置表示 (absolute|fixed)

[absolute: ウィンドウのサイズは上部の位置とのウィンドウの親子関係によって決まります。絶対、固定、相対の決定; 固定: ウィンドウのサイズは、上位層の位置が固定された親子関係ウィンドウによって決定されます]

上、右、下、左: オフセットを設定 (|auto);

[自動に設定すると、ウィンドウがこの方向の中央に配置されないことを示します。例: left:auto、ウィンドウは水平位置の中央に配置されません]

マージン: アダプティブレイアウト (自動);

【ウィンドウは両方とも auto の方向にのみ中央に配置されます]

高さ、幅: 設定するかどうかを指定できます (|auto)

[設定されていない場合、サイズは上、右、下、左]

2. テキストと画像の混合と適応型センタリング

.nav { position: relative;float: left;width: 220 px;height: 45 px;cursor: pointer;line - height: 45 px;text - align: center;vertical - align: middle;color: #fff;font - size: 18 px;font - weight: 600; }
.nav.nav - item { position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;height: 25 px;line - height: 25 px;display: table - caption; }
    .nav span { position: relative;top: 0;bottom: 0;height: 25 px;padding - left: 30 px;display: inline - block; }
    .nav img { position: absolute;top: 0;left: 0;width: 25 px;height: 25 px;z - index: 10 }

簡単な分析:

.nav: ウィンドウサイズを制限する

【text-align: 水平方向の中央に配置されるスパンを制限する】

.nav- item: コンテンツを垂直方向に中央に配置するように制御します。

【display: 並べて表示されるコンテンツを制限します】

.nav span: 画像の表示範囲を制限します

【padding-left: 画像の表示スペースを残します。 ; ディスプレイ: ディスプレイに合わせる】

.nav img: 画像のサイズと表示位置を制限する

シンプルだからこそ完璧。