css

div 안에 div 중앙정렬

wanee 2015. 1. 29. 12:14
반응형

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style>
body {margin:0px;}
#a {width:680px;height:300px;background:#580303;position:relative;margin:0px auto;}
#b {width:300px;height:100px;background:green;margin:0px auto;}
</style>

</head>

<body>
<div id="a">
<div id="b"></div>
</div>
</body>
</html>

 

 

위의 소를를 적용하면 아래와 같이 나온다

 

 

상단에서 스페이스를 원할경우

1. a 레이어 안쪽 여백인 padding-top값을 주면된다.

#a {width:680px;height:300px;background:#580303;position:relative;margin:0px auto; padding-top:20px;}
#b {width:300px;height:100px;background:green;margin:0px auto;}

 

 

2. b 레이어에 position:relative; 값 적용 후 top:20px; 로 해결해도 된다. (상대값 적용)

#a {width:680px;height:300px;background:#580303;position:relative;margin:0px auto;}
#b {width:300px;height:100px;background:green;margin:0px auto; position:relative;top:20px;}

 

 

 

 

 

 

반응형