html_HTML/Xhtml_Web 페이지 제작의 가로, 세로 센터링 관련 문제 정리

최근 센터링 문제가 많이 발생해서 나중에 쉽게 찾을 수 있도록 여기에 요약해 보는 시간을 가졌습니다

1. 중앙 정렬

코드 복사

코드는 다음과 같습니다. 다음은 다음과 같습니다.

저는 중간입니다...

.. 높이 선 높이 텍스트 -center（ 한 줄만 가운데에 배치할 수 있음)
.wrap{
width:px
height:px;
border:px solid red
text-align: center;
line-height: px;
}

ps:text-align:center는 인라인 요소를 요소 아래의 중앙에 배치합니다.
1.2display: table-cell (여러 줄 중앙 정렬 높이 고정)

코드 복사

코드는 다음과 같습니다.

.wrap{
너비:px;
높이:px;
테두리:px 단색 빨간색
text-align:
디스플레이:테이블- cell;
Vertical- align: middle;
}

display:table-cell: ie67에서는 작동하지 않습니다. display:table;
ie67: (앞으로는 사용하지 않을 예정이지만 여기에 넣어두자)
방법 1: (em 태그의 높이는 태그의 높이와 같다. 따라서 스팬과 em을 부모의 센터링 스팬과 동일합니다.)

코드 복사The 코드는 다음과 같습니다.

중간입니다... 중간입니다... 중간에 있어요... 중간에 있어요...

.wrap{
너비:px;
높이:px;
테두리:px 빨간색
텍스트 정렬: 센터;
}
.wrap 범위{
수직 정렬: middle;
디스플레이:인라인 블록;
너비:px;
}
.wrap em{
높이:%;
수직 정렬:
디스플레이: 인라인 블록;
}

방법 2: (절대 위치에 있는 상위 태그를 하위 요소에 추가한 다음 하위 요소의 상대적 위치를 일치시켜 수평 및 수직 중앙에 배치)

코드 복사코드는 다음과 같습니다.

< ;span class="span"> ;
중간입니다... 중간입니다... 중간입니다... 중간입니다 중간...

.wrap{
너비:px;
높이:px;
테두리: px 단색 빨간색;
디스플레이:테이블;
위치:상대적;
오버플로: 숨겨진;
}
.wrap .span{
디스플레이:테이블-셀
수직 -align: 중간;
텍스트 정렬: center;
*위치: 절대;
위쪽:%;
왼쪽:%;
}
.wrap .span{
*위치:상대;
위쪽:-%;
왼쪽:- %;
}

1.3패딩(안쪽패딩, 말할필요도 없음)

코드복사코드

.wrap{
width:px;
border:px solid red;
padding:px ;
}

2. 중앙 요소

코드 복사 코드

2.1위치:절대 음수 여백(여백을 계산하려면 너비와 높이가 있어야 함)

코드 복사코드는 다음과 같습니다.

.wrap{
너비:px;
높이:px;
위치: 절대;
왼쪽:%; :-px;
여백-왼쪽:-px;
테두리:px 단색 빨간색;
}
.wrap 범위{
너비:px
높이:px; > > 배경:빨간색;
위치: 절대;
위쪽:%;
왼쪽:%
여백:-px;
}




ps: CSS는 DIV의 가로 가운데 맞춤과 세로 가운데 맞춤을 구현합니다.

코드 복사

code 다음과 같습니다:

>

DIV는 수평 및 수직 상하 중앙에 위치합니다.DIVCSS5

< ;/html>




수평 및 수직 센터링 원리 소개

절대 위치 지정: 여기서는 절대 위치를 사용하여 상단까지의 개체 거리를 설정하고 왼쪽을 50%로 설정합니다. 50%로 설정되어 있으면 상자는 실제로 센터링 효과가 달성되지 않으므로 margin-left:-200px;margin-top:-100px; 여기서 요령은 margin-left 값이 절반이 된다는 것입니다. width 및 margin-top 값도 개체 높이의 절반입니다. 동시에 설정은 음수이므로 가로 및 세로 중심 맞춤이 달성됩니다.