float 요소 중앙정렬
본문
예제1
<style type="text/css">
body {margin:0;padding:0;}
div {float:left;width:500px;border:1px solid red;}
ul {position:relative;float:right;left:-50%;margin:0;padding:0;}
li {position:relative;left:50%;float:left;width:100px;height:100px;border:1px solid blue;}
</style>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
예제2
<style type="text/css">
body {margin:0;padding:0;}
div {float:left;width:500px;border:1px solid red;}
ul {position:relative;float:left;left:50%;margin:0;padding:0;}
li{position:relative;float:left;right:50%;width:100px;height:100px;border:1px solid blue;}
</style>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
float 로 된 li 요소들이 빨간 큰 박스 중간으로 정렬이 되어야 하는데
익스에서는 정상적으로 나오는데 크롬에서는 정렬이 안되네요..
li 갯수를 꽉차지 않게 줄이면 중앙정렬은 되는데 가로넓이를 초과하는 경우에는 왼쪽으로 붙어버린다는 ㅠ.ㅠ
예제1이나 예제2와 둘 다 동일한 증상입니다.
도움 부탁드립니다~~
답변 7
이방식이 더 안전할것 같네요
<!DOCTYPE=html>
<html>
<style type="text/css">
body {margin:0;padding:0;}
ul{list-style:none}
div {width:500px;border:1px solid red;*zoom:1}
div:after {content:""; display:block; clear:both;}
ul {position:relative;margin:0;}
li{float:left;width:100px;height:100px;border:1px solid blue;}
</style>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<style type="text/css">
body {margin:0;padding:0;}
div {width:500px;border:1px solid red;}
ul {position:relative;margin:0;overflow:hidden}
li{float:left;width:100px;height:100px;border:1px solid blue;}
</style>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
SyntaxHighlight 가 적용시키면 수정하기 오류나서 여러번 삭제/작성했네요 ㄷ
흐흙.. DTD를 선언할수가 없는 상황이라 이번에는 익스에서 안되네요..
DTD 없이는 힘들려나요? ㅠ.ㅠ
DTD없이 하시는게 장기적으로 봤을때 더 문제가 생길 확률이 높을듯한데요
CSS분기처리로 접근하셔도 되실듯합니다.
style.css
<!--[if IE]>
style_ie.css
<![endif]-->
오버라이딩 시키는 방법으로 하셔도 되실듯요
일단 좀 더 연구를 해봐야겠네요.. 답변 감사합니다 ^^
근데 답변채택버튼이 어디로 도망갔나 ;;
에공.. 다시 보니까 정렬이 안맞네요 ㅡ,.ㅡ
li 넓이가 100px 일때는 맞는데 사이즈 변경되면 중앙이 안맞는다는 ㅠㅠ
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* { margin:0; padding:0}
ul { list-style-type:none; width:1000px; border:1px solid #f00; text-align:center; margin:0 auto;}
li { list-style:none; border:1px solid #00f; display:inline;}
li > span { width:120px; display:inline-block;}
</style>
</head>
<body>
<ul>
<li><span>1111</span></li>
<li><span>2222</span></li>
<li><span>3333</span></li>
<li><span>4444</span></li>
<li><span>5555</span></li>
</ul>
</body>
</html>
대충 한번 잡아봤는데 원하시는 것과 결과가 비슷하려나요;ㅁ;?
ul 가로값에 상관없이 li부분이 가운데 정렬됩니다.
float안쓰고 display요소를 활용해서 처리해봤습니다.
물론 li합이 가로보다 적을때 한해서겠지만요..
li가로값은 내부 span으로 제어하면 대충 원하시는 출력물이 나오는거 같은데...
span에 고정값 안줘도 가운데 정렬은 잘될겁니다.
그냥 지나가다 삽질한번 해봤습니다...
저 방식으로도 해보기는 했는데 가로넓이를 넘어가게 되면 좌측으로 붙는게 아니라
전부 다 중앙정렬이 되어버려서요.. ㅠ.ㅠ
가급적 중앙정렬로 해보고 싶었는데 그냥 좌측정렬로 가야겠네요
LaRuota 님 관심가져주셔서 감사합니다 ^^
답변을 작성하시기 전에 로그인 해주세요.