728x90
반응형
테이블에서는 align="center" 을 사용하면 가운데 정렬이 쉽게 되지만
div 같은 경우에는 그렇지 않습니다.
예전에는 position:relative; left:50%; margin-left:-(컨텐츠 가로값의 반)px; 을 이용해서 div를 정렬했는데,
margin:0 auto; 만 넣어주면 간단하게 해결됩니다.
margin:0 auto; 을 사용하다보면 ie8 에서는 안먹힐 때가 종종있는데 그럴때는 상위 div에 text-align="center" 속성을 추가해 줍니다.
<style>
#wrap {
text-align:center;}
.box {
margin:0 auto;
width:300px;
height:100px;
background-color: rgb(255,153,0);}
</style>
<body>
<div id="wrap">
<div class="box"></div>
</div>
</body>
그런데 margin:0 auto;같은 경우는 .box 의 가로값이 픽스되었을때 가능한 정렬법입니다.
(위와 같이 작업을 하고 가로값을 써주지 않으면 가운데 정렬이 안된다는;;;;)
만약에 .box의 가로값이 유동적이고 픽스되지 않았을때 가운데 정렬을 해야한다면 아래 소스를 활용하시길 바래요~
<style>
.wrap {
margin:auto;
text-align:center;}
.box {
vertical-align:middle;
display:inline-block;}
.box .in {
width:50px;
height:30px;
background-color:#FFF;}
</style>
<body>
<div class="wrap">
<div class="box">
<div class="in"></div>
</div>
</div>
</body>
728x90
반응형
'공부 > html, css' 카테고리의 다른 글
| div 좌우 배열 정렬하기 (0) | 2023.01.07 |
|---|---|
| div 가운데 정렬 (세로) (0) | 2023.01.07 |
| 뷰포트 설정 (viewport) (0) | 2015.07.01 |
| 파비콘 만들기 (favicon) (0) | 2015.06.30 |
| 요소,문단,테이블 (0) | 2015.06.19 |
