적응형 센터링

1. 형태 중심 맞추기

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

간단한 분석:

위치: 고정 위치 표시(절대|고정);

　【절대: 위쪽 위치가 절대, 고정, 상대 고정인 부모-자식 관계 창에 따라 창 크기가 결정됩니다. 위쪽 위치가 고정된 부모-자식 관계 창에 따라 창 크기가 결정됩니다. 】

top ,right,bottom,left: 오프셋 설정 (|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: 제어 콘텐츠의 수직 중앙 정렬

[표시: 나란히 표시할 콘텐츠 제한]

.nav 범위: 이미지 표시 범위 제한

[padding-left; : 이미지용 표시 공간 유지; 디스플레이: 디스플레이에 맞게 조정】

　.nav img: 이미지의 크기와 표시 위치를 제한합니다.

단순함 때문에 완벽합니다.