CSS 그래프 가운데 정렬 문의
본문
http://osanmh.com/gnuboard/con_result.html
위 보이는 페이지에 그래프들이 왼쪽으로 정렬이 되어 있는데요..
가운데로 보이게 하고 싶습니다.
아래의 css중에 어느부분에 추가 혹은 수정을 해야 할까요?
도움 부탁드립니다.
/* Vertical Bar Graph */
.vGraph{padding:0px 0;}
.vGraph ul{ margin:0; padding:0; height:200px; border:0px solid #ddd; border-top:0; border-right:0; font-size:11px; font-family:Tahoma, Geneva, sans-serif; list-style:none;}
.vGraph ul:after{ content:""; display:block; clear:both;}
.vGraph li{ float:left; display:inline; width:15%; height:100%; margin:0 0%; position:relative; text-align:center; white-space:nowrap;}
.vGraph .gTerm{ position:relative; display:inline-block; width:100%; height:20px; line-height:20px; margin:0 -100% -20px 0; padding:200px 0 0 0; vertical-align:bottom; color:#767676; font-weight:bold;}
.vGraph .gBar{ position:relative; display:inline-block; width:100%; margin:-1px 0 0 0; border:1px solid #ccc; border-bottom:0; background:#e9e9e9; vertical-align:bottom;}
.vGraph .gBar span{ position:absolute; width:100%; top:-20px; left:0; color:#767676;}
답변 2
그래프가 가운데 정렬이 안 되는 이유는
.vGraph li{ float:left; ~ } 에서 float:left; 때문입니다. float:left; 를 삭제한 후 나머지 부분의 위치를 다시 조정해보세요.
예를 들면, 아래와 같이 float:left; 삭제, width:15%; 옮김
.vGraph li{ display:inline; height:100%; margin:0 0%; position:relative; text-align:center; white-space:nowrap;}
.vGraph .gBar{ position:relative; display:inline-block; width:15%; margin:-1px 0 0 0; border:1px solid #ccc; border-bottom:0; background:#e9e9e9; vertical-align:bottom;}
답변 너무너무 감사합니다. ^^
