div 내의 div를 중앙에 정렬하려면 (CSS)

어떤 글에서 박스를 가운데에 정렬되게 하고 싶은 경우가 많을 것입니다. div는 align 속성을 가지고 제어가 잘 되지 않습니다. 이런 경우 다음과 같이 두 개의 div를 중첩하여 사용하여 쉽게 중앙에 정렬되게 할 수 있습니다.

다른 태그 선택자의 경우에도 아래의 방법을 응용하여 가운데 정렬하는 것이 가능합니다.

CSS를 사용하여 div 내의 div를 중앙에 정렬하는 방법

Div 내의 Div를 가운데 정렬하고 싶은 경우 다음과 같은 css 코드를 사용할 수 있습니다.

#out {
 width: 100%;
 text-align: center;
 }
#in {
 display: inline-block;
 }

가령 html 코드가 다음과 같을 경우에,

<div class="out">
    <div class="in">
        
    <div>
    
</div>

다음 그림과 같이 css를 적용하면 안쪽의 div가 중앙에 정렬되어 있음을 알 수 있습니다.

일반적인 상황에서 가운데 정렬에 사용되는 CSS 코드

일반적으로 다음과 같은 간단한 CSS 코드로 가운데 정렬을 시도할 수 있습니다.

.align-center {
  text-align: center;
}

블록 요소인 경우:

.align-center {
  margin: 0 auto;
}

CSS/Javascript/PHP 코드 판매 사이트

참고로 워드프레스 플러그인, 자바스크립트/jQuery 템플릿, PHP 코드 등 각종 스크립트 코드를 판매하는 Codecanyon에서 CSS 코드와 스크립트를 구입할 수 있습니다. 25000개 이상의 코드 스크립트가 판매되고 있습니다.

마치며

이상으로 CSS를 사용하여 Div 내의 Div를 가운데 정렬하는 방법에 대해 살펴보았습니다. 가운데 정렬이 생각처럼 아는 되는 경우에 이 방법을 사용하면 원하는 대로 중앙에 정렬되는 경우가 많습니다.

참고:

• jQuery를 사용하여 DIV를 화면 중앙에 정렬하기