2011-09-21 6 views
3

CSS를 사용하여 좌석 배치 계획을 만들고 싶습니다. 상자로이 튜토리얼의 CSS 파일 http://net.tutsplus.com/tutorials/html-css-techniques/create-a-document-icon-with-css3/을 사용했습니다. 나는이 같은 행에 두 번째 상자를 추가하기 위해 노력하고있어 때CSS로 좌석 배치도 작성

첫째

,이 선을 건너 뜁니다, 후 나는 다음과 같이 상자의 CSS를 변경 :

.docIcon { 
    background: #15cd2f; 

    background: -webkit-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 
    background: -moz-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 
    background: -o-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 
    background: -ms-linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 
    background: linear-gradient(top, #caffb2 0, #15cd2f 15%, #caffb2 40%, #caffb2 70%, #15cd2f 100%); 

    border: 1px solid #ccc; 
    display: block; 
    width: 26px; 
    height: 50px; 

    float:left; 
    text-align:center; 
} 

하지만 문제는 내가있다 필요로하는 행은 왼쪽에 서있는 것이 아니라 중앙에 위치해야합니다.

어떻게해야합니까?

감사합니다.

답변

2
.docIcon {display: inline-block;} 

그런 text-align: center

+0

나는 또한 이것을 시도했으나 여전히 왼쪽에있다.

\t \t A
24
\t \t A
23
용기의 내용 입니다 .container { \t 텍스트 정렬 : 센터; } – CanCeylan

+0

나를 위해 작동하는 것 같습니다. 예 : http://jsfiddle.net/yMVfL/ –

+0

아, 'float : left'을 제거하십시오. –

1

DA를 중심으로하고있다 된 용기에 상자를 포장 잘 .... 이것은 당신이 무엇을하려고하는 경우 여기 이 http://jsfiddle.net/jzjVT/3/ 을 볼 수 있습니다 ..