1. 가로 센터링 설정
인라인 요소 센터링 설정: 설정된 요소가 텍스트나 그림 등의 인라인 요소인 경우 상위 요소에 text-align:center를 설정하면 가로 센터링이 이루어집니다. 코드 예시는 다음과 같습니다.
HTML代码 <body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body> CSS代码 <style> .txtCenter{ text-align:center; } </style>
고정 너비 블록 요소의 센터링 설정: 고정 너비와 블록의 두 가지 조건을 충족하는 요소는 "왼쪽 및 오른쪽 여백" 값을 로 설정하여 센터링할 수 있습니다. "자동". 코드 예는 다음과 같습니다.
HTML代码 <body> <div>我是定宽块状元素,哈哈,我要水平居中显示。</div> </body> CSS代码 <style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
가변 너비 블록 요소의 중심 맞추기:
테이블 태그를 추가하면 길이 적응성을 활용합니다. 테이블 태그 - --즉, 길이가 정의되지 않고 상위 요소 본문의 길이가 기본값으로 지정되지 않습니다(테이블의 길이는 그 안에 있는 텍스트의 길이에 따라 결정됨). 고정 너비 블록 요소를 선택한 다음 고정 너비 블록 중심 여백 방법을 사용하여 가로로 가운데에 배치합니다. 코드 예시는 다음과 같습니다.
HTML代码 <div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div> CSS代码 <style> table{ border:1px solid; margin:0 auto; } </style>
2. 표시 설정: 인라인 방식: 블록 수준 요소 표시를 인라인 유형으로 변경(인라인 요소 표시로 설정)한 후 텍스트 정렬을 사용합니다. 센터링 효과를 달성하기 위해 센터. 코드는 다음과 같습니다:
HTML代码 <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> CSS代码 <style> .container{ text-align:center; } /* margin:0;padding:0(消除文本与div边框之间的间隙)*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px(设置li文本之间的间隔)*/ .container li{ margin-right:8px; display:inline; } </style>
3. position:relative 및 left:50% 설정: float를 상위 요소로 설정한 다음 position:relative 및 left:50%를 상위 요소로 설정합니다. , 하위 요소는 수평 중심을 달성하기 위해 position:relative 및 left: -50%를 설정합니다. 코드는 다음과 같습니다.
HTML代码 <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> CSS代码 <style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>
2. 세로 센터링 설정
상위 요소의 높이가 결정된 한 줄의 텍스트:
세로 센터링 방법 부모 요소의 높이가 결정된 한 줄의 텍스트 이는 부모 요소의 높이와 줄 높이를 일관되게 설정하여 달성됩니다. (height: 요소의 높이, line-height: 이름에서 알 수 있듯이 줄 높이(줄 간격)는 텍스트에서 줄 사이의 기준선 사이의 거리를 나타냅니다.) 코드는 다음과 같습니다.
HTML代码 <div class="container"> hello, world! </div> CSS代码 <style> .container{ height:100px; line-height:100px; background:#999; } </style>
상위 요소의 특정 높이를 갖는 여러 줄의 텍스트:
1. 삽입 테이블(tbody, tr, td 포함) 태그를 사용합니다. 수직 정렬: 중간을 설정합니다. CSS에는 수직 정렬이라는 속성이 있습니다. 상위 요소가 이 스타일을 설정하면 모든 인라인 블록 유형 하위 요소에 유용합니다. 코드는 다음과 같습니다:
HTML代码 <body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body> CSS代码 table td{height:500px;background:#ccc} /*因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。*/
2. Chrome, Firefox 및 IE8 이상 브라우저에서는 블록 수준 요소 표시를 테이블 셀(테이블 셀 표시로 설정)로 설정하고 활성화할 수 있습니다. 수직 정렬 속성이 있지만 IE6과 7에서는 이 스타일을 지원하지 않으며 호환성이 상대적으로 좋지 않습니다. 코드는 다음과 같습니다.
HTML代码 <div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div> CSS代码 <style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>
이 방법의 장점은 불필요한 태그를 추가할 필요가 없다는 점이지만, 호환성도 그다지 좋지 않다는 단점도 있습니다. IE6 및 7과 호환되며 디스플레이가 이런 방식으로 수정되어 블록이 테이블 셀이 되어 원래 블록 요소의 특성이 파괴되었습니다.
3. 암시적으로 표시 유형 변경
요소인 경우(display:none을 제외하고 이전 요소 유형에 관계 없음) 다음 두 문장 중 하나를 설정합니다.
1 . position : 절대
2. float : left 또는 float:right
요소의 표시 유형이 자동으로 display:inline-block(블록 요소)으로 변경됩니다. , 물론 요소의 너비와 높이를 설정할 수 있으며 기본 너비는 상위 요소를 차지하지 않습니다. 코드는 다음과 같습니다.
HTML代码 <div class="container"> <a href="#" title="">进入课程请单击这里</a> </div> CSS代码 <style> .container a{ position:absolute; width:200px; background:#ccc; } </style>