[html,css] 패딩과 text-align으로 중앙정렬 ...
조회수 4882회
이런식으로 SING의 홈페이지를 중앙정렬 해야하는데 패딩과 text-align을 이용해야합니다 ...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {width:1000px; margin:0 auto;}
div#theme{overflow:hidden;
/*padding:0 250px 0 250px;*/
}
div.box{
margin:0 auto;
text-align:center;
/*float:left;*/
/*border:1px solid black;
background:white;
color:red;*/
/*margin-top:125px;*/
/*font-size:60px;*/
/*margin-left:10px;*/
}
div.S,.I,.N,.G{
float:left;
border:1px solid black;
background:white;
color:red;
font-size:60px;
margin-left:3px;
padding:0 1px 0 1px;
}
#theme {/*text-align:center;*/background:skyblue;height:250px;padding:0 0 0 0px;border-top:7px dotted blue;border-bottom:7px dotted blue;margin:0 auto;}
#mainmenu {background:gray;}
#wrap {overflow:hidden;}
#maintext {background:yellow; float:left;width:700px;}
#submenu {background:lightgray; float:left;width:300px;}
#tale{background:green;}
</style>
</head>
<body>
<div id="theme">
<div class="box">
<div class="S">
<span>S</span>
</div>
<div class="I">
<span>I</span>
</div>
<div class="N">
<span>N</span>
</div>
<div class="G">
<span>G</span>
</div>
</div>
<span style="color:white;text-align:center;">의 홈페이지</span>
</div>
</div>
<div id="mainmenu">MAINMENU</div>
<div id="wrap">
<div id="maintext">
MAINTEXT<br/>MAINTEXT<br/>MAINTEXT<br/>MAINTEXT<br/>
</div>
<div id="submenu">
SUBMENU<br/>SUBMENU<br/>SUBMENU<br/>SUBMENU<br/>SUBMENU<br/>SUBMENU<br/>
</div>
</div>
<div id="tale">TALE TALE TALE</div>
</body>
</html>
코드가 엄청 지저분합니다 ... 도움 주시면 정말 감사드립니다... 몇시간동안 씨름중인데 답이 나오질 않네요 ㅣㅣ
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
꼭 text-align으로만 해결해야하는거라면 다음과 같이 CSS를 수정해보세요.
가로 정렬은 다음과 같이 수정하면 될 것 같습니다.
.S,.I,.N,.G{ border:1px solid black; background:white; color:red; font-size:60px; margin-left:3px; padding:0 1px 0 1px; display: inline-block; /* display 속성을 inline-block 으로 바꾸세요.*/ }세로 정렬의 경우 참고링크를 한번 읽어보고, div.box 수준에서 수정해보세요. 높이가 고정된 것이라면 단순히 padding이나 margin 만 가지고도 해결할 수 있을 것 같네요.
댓글 입력