Please Enable JavaScript!
Gon[ Enable JavaScript ]

스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용

스타일시트 CSS

스타일시트 CSS 가운데 정렬하는 방법, text-align margin 이용

 

CSS 를 이용해서 가운데 정렬하는 방법은 두가지가 있습니다. text-align margin 속성을 이용하는 것입니다. 또한 가변적인 상황에서 중앙정렬을 하는 방법에 대해서도 알아 보겠습니다.

 

중앙정렬을 위하 text-align 속성의 값은 center 을 사용했습니다. 그리고 margin 은 왼쪽과 오른쪽을 auto 로 주게 되면 자동으로 글을 맞추게 되서 중앙정렬이 됩니다. 아래 전체소스는 상단에 text-align 을 이용해서 정렬하였고 아래는 margin 속성을 이용해서 맞추었습니다. 

<!DOCTYPE HTML >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title> 가운데 정렬 </title>
<style type="text/css">
	.vi{
		border-radius: 5px;
		background-color: #2e5b86;
		border-style: solid;
	    border-color: #5d5d5d;
	    border-width: 2px;
	    color: #FFFFFF;
		margin-bottom: 5px;
		padding:15px;
		width:400px
	}
	.align-center { text-align: center; }
	.align-justify { text-align: justify; }
	.margin-center { 
		margin-left:auto;
		margin-right:auto;
	}
</style>
</head>
<body>
  <div id="" class="align-center vi">align-center 중앙정렬</div>
  <div id="" class="align-right vi">레드파쿠라는 물고기는  사람의 이빨과 흡사한 구강구조 때문에 인치어(人齒魚)로도 일컬어진다. 그런데 이 물고기에게 '고환사냥꾼(Ball cutter)'이라는 악명 높은 별명이 붙어있다. 실제 레드파쿠가 파푸아뉴기니에서 발가벗고 목욕하던 남성 2명의 고환을 홀랑 따먹고 달아났다는 해외토픽이 화제가 된 적이 있다. 레드파쿠와 유사한 종으로 피라니아가 있다. 
  </div>
  <div id="" class="align-center vi">margin 중앙정렬</div>
  <div id="" class="margin-center vi">레드파쿠라는 물고기는  사람의 이빨과 흡사한 구강구조 때문에 인치어(人齒魚)로도 일컬어진다. 그런데 이 물고기에게 '고환사냥꾼(Ball cutter)'이라는 악명 높은 별명이 붙어있다. 실제 레드파쿠가 파푸아뉴기니에서 발가벗고 목욕하던 남성 2명의 고환을 홀랑 따먹고 달아났다는 해외토픽이 화제가 된 적이 있다. 레드파쿠와 유사한 종으로 피라니아가 있다. 
  </div>
 </body>
</html>

 

하지만 두개의 차이는 있습니다. 그림에서 보는 것 처럼 margin 은 내부에 데이터뿐만 아니라 div 도 화면중앙으로 맞추게 됩니다. text-align 과 차이가 있죠 

스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용

 

좀더 명확한 차이를 보실려면 영문이 들어간 텍스트를 보시면 됩니다. text-align:center은 텍스트 데이터 모두를 중앙정렬로 맞춥니다. 하지만 margin auto 는 내부에 텍스트를 왼쪽 정렬로 맞추게 됩니다. 두개의 div 샘플을 비교하시면 쉽게 구분이 가능할겁니다.

스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용

Posted by 녹두장군

댓글을 달아 주세요

  1. Favicon of https://hojungcheon.tistory.com 하마를넣는법 2017.04.05 23:29 신고  댓글주소  수정/삭제  댓글쓰기

    페북 공유 및 좋아요 버튼과 구글플러스 공유 버튼을 달았는데요 이것을 우측으로 설정할려면 어떻게 코드를 입력해야할까요? 각각 fb-like, g-plusone 이렇게 적혀있던데 어떻게 해야할지 모르겠습니다.