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

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

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

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

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

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

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

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

Codecanyon에서 판매되는 CSS 코드
Codecanyon에서 판매되는 베스트셀링 CSS 코드

참고:



2 개 댓글

  1. 다른 방법:

    #outer {
    position: relative;
    }

    #inner {
    margin: auto;
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    }

    http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div

    응답