div 안에 div를 수평으로 가운데 위치하는 방법.


바깥에 덮는 <div>width : 100%일때, <div> CSS를 사용해서 <div>안에 <div>를 수평으로 가운데 오도록 하려면 어떻게 해야하나요?

작성중인 코드는 대략 아래와 같습니다..

<div id="outer" style="width: 100%">  
  <div id="inner">title</div>
</div>
  • 2016년 01월 31일에 작성됨
    Junior Front-End Developer at 'NewNormal™ '

조회수 347


2 답변


좋아요
2
싫어요
채택취소하기

css에 margin을 활용해서 다음과 같이 작성합니다.

#inner {
    width: 50%;
    margin: 0 auto; 
}

width : 50%;를 해야하는건 아니고요, 밖에 포함하는 <div>width보다 작은 수치이면 됩니다. margin: 0 auto;가 실제로 가운데 위치하도록 하는 속성값입니다.

만약에 IE8+을 대응한다면 아래와같이 처리하는 것이 좋습니다. 따로 width를 설정하지 않고, 다음과 같이 합니다.

#inner {
    display: table;
    margin: 0 auto;
}
  • 2016년 06월 01일에 수정됨
    Css / visual design
  • 2016년 01월 31일에 작성됨
    Css / visual design


flexbox를 이용하면 쉽게 할 수 있어요. http://ko.learnlayout.com/flexbox.html


로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close