CSS 그래프 가운데 정렬 문의

CSS 그래프 가운데 정렬 문의

QA

CSS 그래프 가운데 정렬 문의

답변 2

본문

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;} 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
  • 질문이 없습니다.
전체 0
© SIRSOFT
현재 페이지 제일 처음으로