CSS에서 가로 가운데 맞춤을 설정하는 방법은 무엇입니까? CSS에서 가로 가운데 맞춤을 설정하는 두 가지 방법

css 스타일은 수평 센터링을 달성할 수 있는데 css 수평 센터링을 설정하는 방법은 무엇입니까? 이 글에서는 css 수평 센터링을 구현하는 방법을 알려드리겠습니다.

CSS에서는 인라인 요소의 가로 중심과 블록 수준 요소의 가로 중심을 설정할 수 있습니다. 인라인 요소와 블록 수준 요소에 대해 모르는 학생들은 블록 수준의 정의가 무엇인지 참고하세요. CSS의 요소? CSS 블록 수준 요소는 무엇입니까? 및 CSS 인라인 요소는 무엇입니까? CSS 블록 수준 요소와 인라인 요소의 차이점이 두 기사에서는 CSS의 두 가지 가로 가운데 맞춤 설정을 직접 살펴보겠습니다.

먼저 CSS를 사용하여 인라인 요소를 가로 중앙에 배치하는 방법을 살펴보겠습니다.

첫 번째 유형: CSS 인라인 요소는 가로 중심에 배치됩니다.

구문: ​​div{text-align:center} /*DIV 내의 인라인 요소는 가로 중심에 배치됩니다*/

간단한 설명: CSS 인라인 요소의 중심을 설정합니다. 상위 요소 텍스트 정렬:가운데 스타일.

<div style="text-align: center">
    <span>行内元素水平居中</span>
</div>

자세한 설명:

1. Text 여기서 레이블을 기준으로 "text"라는 두 단어를 가로로 가운데 배치하는 것은 의미가 없습니다. 의 너비, 즉 두 문자 "text"는 항상 가로 중앙에 위치합니다.

2.

Text

p는 블록 수준 요소이고 너비는 한 줄을 차지하지만 텍스트는 두 줄만 차지하므로 두 단어 "Text"를 가로로 가운데에 배치하는 것이 좋습니다. 문자 너비. 이때 p 요소에 text-align:center를 설정하면 "text"라는 두 단어가 한 줄에 가로 중앙에 배치됩니다.

3.

<div>
    <div style="width: 100px;height: 100px;background-color: green;margin: 0 auto">
    </div></div>

<table style="margin: 0 auto">
    <tbody>
        <tr><td>
                <div>设置table实现水平居中</div>
    </td></tr>
    </tbody></table>

<div style="text-align: center">
    <div style="display: inline">
        设置inline实现水平居中    
 </div></div>

<div style="float:left;position:relative;left: 50%">
    <div style="position: relative;left: -50%">
        设置relative实现水平居中
    </div>
</div>