CSS를 사용한 중앙 인라인 블록
-
text-align
CSS 속성을 사용하여 인라인 블록 중앙에 배치 -
justify-content
및display
CSS 속성을 사용하여 인라인 블록 중앙에 배치 -
left
,position
및transform
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
으로 요소를 중앙에 배치하는 다양한 방법을 배웠습니다.