집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 가로 가운데 맞춤을 설정하는 방법은 무엇입니까? CSS에서 가로 가운데 맞춤을 설정하는 두 가지 방법

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

不言원래의: 2018-09-10 13:59:557420검색

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. 2e1cf0710519d5598b1f0f14c36ba674Text2e1cf0710519d5598b1f0f14c36ba674 여기서 레이블을 기준으로 "text"라는 두 단어를 가로로 가운데 배치하는 것은 의미가 없습니다. 의 너비, 즉 두 문자 "text"는 항상 가로 중앙에 위치합니다.

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

3. dc6dce4a544fdca2df29d5ac0ea9906b2e1cf0710519d5598b1f0f14c36ba674Text2e1cf0710519d5598b1f0f14c36ba674dc6dce4a544fdca2df29d5ac0ea9906b, div를 기준으로 레이블 요소를 가로 중앙에 배치하는 방법.

CSS 인라인 요소의 수평 센터링에 대해 읽은 후 CSS 블록 수준 요소의 수평 센터링에 대해 이야기해 보겠습니다. CSS 블록 수준 요소의 수평 센터링은 고정 너비 블록 수준 요소의 수평 센터링과 수평 센터링으로 구분됩니다. 가변 너비 블록 수준 요소를 별도로 살펴보겠습니다.

두 번째 유형: CSS 고정 너비 블록 수준 요소는 가로 중앙에 위치합니다. 블록 수준 요소이자 고정 너비 요소입니다.

가로 중심에 맞춰야 하는 블록 수준 요소의 왼쪽 및 오른쪽 여백 값을 자동으로 설정합니다.

예:

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

css 가변 너비 블록 수준 요소는 가로 중심에 위치합니다. -가변 너비의 요소

예:

1. f5d188ed2c074f8b944552db028f98a1 태그에 블록 수준 요소를 추가합니다.

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

2. 블록 수준 요소 스타일인 display:inline을 설정한 다음 text-align:center 스타일을 상위 요소에 추가하세요.

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

3. 블록 수준 요소에 상위 요소를 추가하고 상위 요소 스타일을 style="float:left;position:relative;left:50%"로 설정합니다. ="float: left;position:relative;left:-50%"

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

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

관련 기사