CSS 요소를 중앙에 배치하는 간단한 방법에 대한 자세한 설명

이 글에서는 CSS 요소의 중심 레이아웃을 자세히 설명하는 간단한 방법을 주로 소개합니다. 인라인 요소, 블록 요소, 인라인 블록이 필요한 친구들이 참고할 수 있는 세 가지 상황을 소개합니다.

먼저 무엇보다도 우리는 어떤 유형의 요소가 있는지 알아야 합니다.

a,span,b,i와 같은 인라인 요소(display:inline;) [사용자 정의할 수 없는 상자]

[기본 피어는 동일한 유형의 태그를 계속 따를 수 있습니다.]
[ 콘텐츠 확장 너비]
[너비 및 높이를 지원하지 않음]
[상하 여백 및 패딩을 지원하지 않음]
[코드 줄 바꿈은 빈 것으로 구문 분석됨]

블록 요소 (display:block ;) p, p, h1-h6 등

[기본적으로 한 줄로 표시]
[기본적으로 모든 CSS 명령 지원]

인라인 블록( display:inline-block;) img [img는 정말 마법 같은 일입니다. 인라인도 블록도 아니고 인라인 블록입니다】

[한 줄에 표시되는 블록]
[너비, 높이 지원]
[너비가 없으면 콘텐츠가 너비가 늘어남]

그런 다음 위의 세 요소를 순서대로 중앙에 배치합니다.

1. 포함된 요소의 한 줄 텍스트

가장 일반적인 해결 방법은 텍스트 정렬 및 정렬을 사용하는 것입니다. line-height

line-height:200px;   
text-align:center;

하지만 이 솔루션이 반드시 완벽할까요? 아닌 것 같아요(누군가 내 강박 장애에 대해 불평할 수도 있습니다)
아무튼 텍스트를 선택할 때마다 텍스트가 아닌 영역도 선택되어 있는 것을 보면 기분이 좋지 않습니다. 그런데 IE6-8에서는 텍스트만 선택합니다.

2. 블록 요소를 중앙에 배치

해결 방법: 위치 지정 요소 + 음수 여백 값 사용

width:100px;   
height:100px;   
position:relative;   
left:100px;   
top:100px;   
margin-left:-50px;   
margin-top:-50px;

단점: 상자의 너비와 높이를 알아야 함

3. 인라인 블록을 중앙에 배치

(1) img를 배경 이미지로 변환한 다음 사용 background-position:center; 그러나 이미지에 대한 링크는 일반적으로 자주 변경되므로 다음과 같이 해야 합니다.

<img  style=”background-img:url(imgURL)” / alt="CSS 요소를 중앙에 배치하는 간단한 방법에 대한 자세한 설명" >

이것은 콘텐츠 스타일의 원칙을 위반합니까? 분리?

(2) 보조 태그

html 코드:

<p class="box">  
    <img  src="img.png" / alt="CSS 요소를 중앙에 배치하는 간단한 방법에 대한 자세한 설명" ><span></span>  
</p>

CSS 코드:

.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}   
.box img{vertical-align:middle;border:1px solid #999;padding:2px;}   
.box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}

효과 :

말도 안되는 소리: img 요소와 보조 요소 범위는 같은 줄에 있어야 합니다. 그렇지 않으면 가로 가운데 맞춤이 완료되지 않습니다. 인라인 블록을 사용할 때 줄 바꿈이 구문 분석됩니다. 공간으로. 사실 인터넷에는 오랫동안 유행했던 테이블 방식 등 다른 방식도 존재한다. 온라인에 너무 많아서 여기서는 보여드리지 않겠습니다.

위 내용은 CSS 요소를 중앙에 배치하는 간단한 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!