CSS를 사용한 중앙 인라인 블록

Shubham Vora 2023년6월20일
  1. text-align CSS 속성을 사용하여 인라인 블록 중앙에 배치
  2. justify-contentdisplay CSS 속성을 사용하여 인라인 블록 중앙에 배치
  3. left, positiontransform CSS 속성 사용
CSS를 사용한 중앙 인라인 블록

이 기사에서는 여러 HTML 요소를 만들고 해당 표시를 inline-block으로 설정합니다. 그런 다음 display: inline-block을 사용하여 모든 요소를 중앙에 배치하는 방법을 배웁니다.

text-align CSS 속성을 사용하여 인라인 블록 중앙에 배치

이 예에서는 parent 클래스 이름으로 <div> 요소를 생성했습니다. <div> 요소 안에 child라는 클래스 이름이 같은 <div> 요소가 3개 더 추가되었습니다.

또한 클래스 이름이 child인 모든 <div> 요소에 다른 background-color를 지정했습니다.

여기에서는 클래스 이름이 child인 모든 요소에 display:inline-block을 설정했습니다. 모든 요소를 중앙에 배치하기 위해 클래스 이름이 parent인 부모 <div> 요소에 text-align: center 속성을 적용했습니다.

출력에서 사용자는 세 개의 하위 <div> 요소가 모두 웹 페이지 중앙에 있음을 볼 수 있습니다.

HTML 코드:

<div class="parent">
    <div class="child" style="background-color: green">First</div>
    <div class="child" style="background-color: red">Second</div>
    <div class="child" style="background-color: blue">Third</div>
</div>

CSS 코드:

.parent {
    text-align: center;
}
.child {
    display: inline-block;
    font-size: 30px;
}

justify-contentdisplay CSS 속성을 사용하여 인라인 블록 중앙에 배치

이 부분에서는 justify-contentdisplay CSS 속성을 사용합니다. justify-content 속성에 center 값을 사용하여 요소의 전체 콘텐츠를 중앙에 배치할 수 있습니다.

예를 들어 클래스 이름이 container<div> 요소를 생성했습니다. 그런 다음 <div> 요소 내부에 텍스트가 있는 세 개의 <p> 태그를 추가했습니다.

모든 단락을 한 행에 표시하려면 display:inline-block 대신 CSS display: flex 속성을 사용할 수 있습니다. 모든 <p> 요소를 한 번에 중앙에 배치하기 위해 justify-content: center 속성을 모든 <p> 요소의 상위 클래스인 container 클래스에 적용했습니다.

HTML 코드:

<div class="container">
    <p style="background-color: green">Welcome</p>
    <p style="background-color: red">To The</p>
    <p style="background-color: blue">DelftStack</p>
</div>

CSS 코드:

.container {
    font-size: 30px;
    display: flex;
	flex-direction: row;
    justify-content: center;
}

left, positiontransform CSS 속성 사용

left, positiontransform CSS 속성을 사용하여 display: inline-block으로 모든 요소를 중앙에 배치합니다. left 속성을 사용하면 요소의 왼쪽 위치를 설정할 수 있습니다.

transform 속성은 요구 사항에 따라 해당 위치에서 요소를 이동합니다. position 속성을 사용하여 요소의 위치 지정 방법을 지정할 수 있습니다.

예를 들어 outer 클래스 이름을 사용하여 <div>를 만들었고 코드에는 inner 클래스 이름을 사용하는 일부 <p> 요소가 포함되어 있습니다. inner 클래스 이름이 있는 모든 요소에 대해 display: inline-block을 사용하여 인라인으로 표시했습니다.

outer 클래스에 left: 50%를 사용하고 위치를 absolute로 설정하여 상위 요소인 body 요소와 관련된 전체 <div>를 이동했습니다. 그런 다음 transform: translate(-50%) 속성을 사용하여 outer라는 클래스 이름을 가진 <div> 요소를 자체 너비의 50%만큼 음의 x 방향으로 이동했습니다.

이 방법으로 <div> 요소를 outer 클래스 이름의 중앙에 배치할 수 있습니다.

HTML 코드:

<div class="outer">
    <p class="inner" style="background-color: green">ABCD</p>
    <p class="inner" style="background-color: red">EFG</p>
    <p class="inner" style="background-color: blue">HIJ</p>
</div>

CSS 코드:

.outer {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.inner {
    font-size: 30px;
    display: inline-block;
}

이번 글에서는 display: inline-block으로 요소를 중앙에 배치하는 다양한 방법을 배웠습니다.

작가: Shubham Vora
Shubham Vora avatar Shubham Vora avatar

Shubham is a software developer interested in learning and writing about various technologies. He loves to help people by sharing vast knowledge about modern technologies via different platforms such as the DelftStack.com website.

LinkedIn GitHub

관련 문장 - CSS Inline