> 웹 프론트엔드 > CSS 튜토리얼 > 텍스트 정렬: 중앙 교체 디스플레이: 수평 중앙 정렬을 위한 테이블을 사용하여 인라인 블록을 수행할 수 있습니까?

텍스트 정렬: 중앙 교체 디스플레이: 수평 중앙 정렬을 위한 테이블을 사용하여 인라인 블록을 수행할 수 있습니까?

Susan Sarandon
풀어 주다: 2024-12-24 19:13:21
원래의
284명이 탐색했습니다.

Can Inline-Block with Text-Align: Center Replace Display: Table for Horizontal Centering?

인라인 블록을 사용한 중앙 디스플레이: 대체 솔루션

랩을 사용하여 요소를 수평 중앙에 정렬할 때 일반적인 접근 방식은 래퍼에 디스플레이: 테이블을 사용하는 것입니다. 그러나 일부는 display: block 또는 display: inline-block을 활용하는 솔루션을 선호할 수 있습니다.

초기 솔루션에서는 원하는 정렬을 달성하기 위해 "wrap" 필수 디스플레이: 테이블이라는 문제가 있었습니다. text-align: center가 body 요소에 적용되고 display: inline-block이 랩에 할당되면서 수정된 접근 방식이 나타났습니다. display: table을 제거함으로써 고정된 너비 제한을 적용하지 않고 요소를 중앙에 효과적으로 정렬하는 대체 솔루션에 도달했습니다.

업데이트된 코드:

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}
로그인 후 복사

이 수정 사항 특정 시나리오에 대해 더 명확하고 잠재적으로 선호되는 접근 방식을 제공하면서 원하는 정렬을 유지합니다.

위 내용은 텍스트 정렬: 중앙 교체 디스플레이: 수평 중앙 정렬을 위한 테이블을 사용하여 인라인 블록을 수행할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿