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-content 및 display CSS 속성을 사용하여 인라인 블록 중앙에 배치

이 부분에서는 justify-content 및 display 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, position 및 transform CSS 속성 사용

left, position 및 transform 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으로 요소를 중앙에 배치하는 다양한 방법을 배웠습니다.