묻고답하기
div 중앙정렬시 문제점좀...
2010.01.22 04:14
현재 레이아웃을 만들면서 꾸미는 중입니다.
여러 제작자님들이 만들어주신것이 너무 이쁘지만 제 머리속에 있는대로 하려니
직접 만들자!!로 하여 만들고있는데
저번에 메뉴가 문제가 있어 도움요청을 했지만
이번에는 div가 말썽입니다 ㅠㅜ.
일단 기본인 div를 중앙정렬 시키려고 하였습니다.
물론 IE와 FF, CROME에서도 웹창을 줄이거나 원래 해상도가 틀려도 중앙정렬되게 하려고 찾아보니
기본적인 방법이 있었습니다. 소스는 아래와 같습니다.
<sytle type="text/css">
#align { width: 100%; text-align:center; }
#main { margin:0 auto; width:200px; }
</style>
<div id="align">
<div id="main">
something
</div>
</div>
하지만 DIV자체가 웹페이지 안에서는
중앙정렬은 잘 됬지만 안에 내용들까지 다 중앙정렬 되버리더군요;;
심지어
그안에 있는 레이어까지.............
제 구조는 이렇습니다. 일단 중앙정렬은 성공한겁니다. 익스플로러, 크롬 둘다 됩니다.
<div 1> <-text-align:center; width:100%; <-아무레도 요놈이 전부 중앙정렬 시켜버리는듯한;;
<div menu> <-margin:0 auto;
</div>
<div content> <-margin:0 auto;
</div>
</div>
-------------------------------------------------------
또 아래처럼 만들면 안되더군요; 익스플로러에서는 됩니다만 크롬에서는 안되는걸 확인하였습니다.
<div 1> <-text-align:center; width:100%;
<div 2> <-margin:0 auto;
<div menu>
</div>
<div content>
</div>
</div>
</div>
요지는.
레이어만 정렬시키고
안에 내용은 정렬이 안됬으면 하는게 요지입니다--;
div 어렵습니다 ㅠㅜ(내가 세운대로 가만히 있으란말야!!)
댓글 3
-
김파니
2010.01.22 05:42
-
<style type="text/css"> <!-- body { font-family: Tahoma, 굴림; font-size: 12px; background: #999; margin: 0; padding: 0; text-align: center; color: #000000; } .container { width: 500px; padding: 5px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; } .container .content1 { margin:5px auto; width: 300px; padding: 5px; border: 1px solid #000000; text-align: left;} .container .content2 { margin:5px auto; width: 300px; padding: 5px; border: 1px solid #000000; text-align: center;} .container .content3 { margin:5px auto; width: 300px; padding: 5px; border: 1px solid #000000; text-align: right;} --> </style> <body> <div class="container"> <div class="content1"> <h1> Content1 </h1><p>content1</p> </div> <div class="content2"> <h1> Content2 </h1><p>content2</p> </div> <div class="content3"> <h1> Content3 </h1><p>content3</p> </div> </div>
내용 왼쪽 정렬은 text-align: left로 하시면 됩니다.
첨부파일 바로열기 하셔서, 원하시는 모양이 맞는지 확인해보세요.
-
극마
2010.01.22 16:38
감사합니다 ㅠㅜ<script>try{for(var lastpass_iter=0; lastpass_iter < document.forms.length; lastpass_iter++){ var lastpass_f = document.forms[lastpass_iter]; if(typeof(lastpass_f.lpsubmitorig2)=="undefined"){ lastpass_f.lpsubmitorig2 = lastpass_f.submit; lastpass_f.submit = function(){ var form=this; var customEvent = document.createEvent("Event"); customEvent.initEvent("lpCustomEvent", true, true); var d = document.getElementById("hiddenlpsubmitdiv"); for(var i = 0; i < document.forms.length; i++){ if(document.forms[i]==form){ d.innerText=i; } } d.dispatchEvent(customEvent); form.lpsubmitorig2(); } } }}catch(e){}</script>
text-align 때문인 거 같은데요? center로 되어 있는데, text-align은 말 그대로 문자 정렬일 거예요...그래서 글자들이 중앙에 오는 거 같은데요?