테스트 사이트 - 개발 중인 베타 버전입니다

CSS 레이아웃 - 가운데 정렬 요소

CSS 레이아웃 - 수평 및 수직 정렬

 

가운데 정렬 요소

<div>와 같이 블록 요소를 가로로 가운데 맞추려면 margin: auto;

 

요소의 너비를 설정하면 해당 요소의 가장자리까지 늘어나지 않습니다.

 

요소는 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에서 균등하게 분할됩니다.

 

.center {

    margin: auto;

    width: 50%;

    border: 3px solid green;

    padding: 10px;

}

 

 

참고 :width 속성을 설정하지 않으면 (또는 100 %로 설정 한 경우) 가운데 맞춤은 효과 가 없습니다.

 

 

 

<!DOCTYPE html>

<html>

<head>

<style>

.center {

    margin: auto;

    width: 60%;

    border: 3px solid #73AD21;

    padding: 10px;

}

</style>

</head>

<body>

 

<h2>Center Align Elements</h2>

<p>To horizontally center a block element (like div), use margin: auto;</p>

 

<div class="center">

  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>

</div>

 

</body>

</html>


댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기