CSS 버튼 스타일링

저는 아직도 CSS가 새롭 긴 게시물을 유감스럽게 생각합니다. 다음 코드가 있습니다CSS 버튼 스타일링

<style type="text/css"> 

.btn { 
    float: left; 
    clear: both; 
    background: url(images/btn_left.png) no-repeat; 
    padding: 0 0 0 10px; 
    margin: 5px 0; 
} 
.btn a{ 
    float: left; 
    height: 40px; 
    background: url(images/btn_stretch.png) repeat-x left top; 
    line-height: 40px; 
    padding: 0 10px; 
    color: #fff; 
    font-size: 1em; 
    text-decoration: none; 
} 
.btn span { 
    background: url(images/btn_right.png) no-repeat; 
    float: left; 
    width: 10px; 
    height: 40px; 

} 
.btn_addtocart { background-color: green; } 
.btn_checkout { background-color: red; } 

</style> 
</head> 

<body> 

<div class="btn btn_addtocart"><a href="#">Add to Cart</a><span></span></div> 

<div class="btn btn_checkout"><a href="#">Check Out</a><span></span></div> 

</body> 
</html>

각 단추를 가운데에 정렬하려고합니다 (가로 맞춤), 어떻게 수행 할 수 있습니까? 패딩과 여백을 가지고 노려 보았지만 배경 이미지가 엉망입니다. 여백없는 일이 있도록

여기, 당신이 버튼을 인라인 요소 기본적으로

.btn { display: block margin-left: auto; margin-right: auto; }

을 할 수 jsFiddle

출처

2011-09-22 raym0nd

시도 마진 자동차, 텍스트 정렬 센터 고정 폭을 오 .. 그리고 플로트 제거하고 잊지 말아 :이 시도 ';'

편집 코드 ..

.btn { 
    clear: both; 
    background: url(images/btn_left.png) no-repeat; 
    padding: 0 0 0 10px; 
    display: block; 
    margin: 5px auto; 
    text-align: center; 
    width: 120px; 
} 
.btn a { 
    height: 40px; 
    background: url(images/btn_stretch.png) repeat-x left top; 
    line-height: 40px; 
    padding: 0 10px; 
    color: #fff; 
    font-size: 1em; 
    text-decoration: none; 
} 
.btn span { 
    background: url(images/btn_right.png) no-repeat; 
    width: 10px; 
    height: 40px; 
} 
.btn_addtocart { background-color: green; } 
.btn_checkout { background-color: red; }

출처

2011-09-22 20:21:24

는 이미지없이 완벽하게 보이지만 엉망이 된 이미지를 추가 할 때 감사합니다. 정답을 얻는 데 도움이되었습니다. – raym0nd

몇 가지입니다. 디스플레이를 차단으로 설정하면 해당 기능이 다음과 같이 작동합니다.

div.btnParent { 
    text-align:center 
}

다른 방법은 버튼의 요소 텍스트 정렬 중심을 포함하는 것입니다. 이 컨테이너에는 중앙에 놓고 싶지 않은 콘텐츠가 더있을 수 있으므로 항상 작동하지 않을 수도 있습니다.

출처

2011-09-22 19:37:28

나는 자동차에 여백을 설정했지만, 그것은 일을 일부러. – raym0nd

"기본적으로 버튼은 인라인 요소입니다."- 일반적으로 버튼은 양식 INPUT 태그입니다. 위의 예제에서 앵커 태그는 기본적으로 인라인입니다. –

코드 스 니펫에서 완전히 볼 수는 없지만 부모 중간에 센터를 배치하려면 여백을 auto로 설정해야합니다.

margin: auto

와 폭

width: 100px:

편집 : 또한 당신이 요소를 가지고있는 float: 스타일을 제거합니다.

출처

2011-09-22 19:38:26

나는 여백을 자동으로 설정하려고했지만 작동하지 않았다. – raym0nd

편집을 참조하십시오. float를 제거하십시오 : 왼쪽 –

div 안에있는 링크 (블록 수준 요소)를 컨테이너 내부에 배치 할 수 있지만 몇 가지 조정해야합니다. .. 중간 부분,

.btn { 
    clear: both; 
    background: url(images/btn_left.png) no-repeat; 
    padding: 0 0 0 10px; 
    margin: 5px 0; 
    text-align:center; 
} 
.btn a { 
    height: 40px; 
    background: url(images/btn_stretch.png) repeat-x left top; 
    line-height: 40px; 
    padding: 10px; 
    color: #fff; 
    font-size: 1em; 
    text-decoration: none; 
} 
.btn span { 
    background: url(images/btn_right.png) no-repeat; 
    float: left; 
    width: 10px; 
    height: 40px; 
    display: block; 

} 
.btn_addtocart a { background-color: green; } 
.btn_checkout a { background-color: red; }

데모 http://jsfiddle.net/andresilich/UtXYY/1/

출처

2011-09-22 20:19:44

는 이미지없이 완벽하게 보입니다. 그러나 이미지를 추가하면 엉망이되어 버립니다. 덕분에 정답을 얻을 수있었습니다. – raym0nd

완벽한! 귀하의 질문에 대한 정답을 게시하는 것을 잊지 마십시오.이 포럼은 사람들이 도움을 얻을 수있는 커뮤니티 운영 포럼이며, 귀하의 솔루션은 다른 사람을 도울 수 있습니다. 건배! –

CSS 버튼 스타일링

답변

관련 문제