CSS에서 가로 가운데 맞춤을 설정하는 방법은 무엇입니까? CSS에서 가로 가운데 맞춤을 설정하는 두 가지 방법-CSS 튜토리얼-php.cn

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"는 항상 가로 중앙에 위치합니다.

Text

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

Text

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

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

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

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

예:

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

로그인 후 복사

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

예:

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

<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>

로그인 후 복사

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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