내부 이미지 사용 <button> 요소

버튼 요소 안에 이미지와 일부 텍스트를 포함하려고합니다.내부 이미지 사용 <button> 요소

<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>

CSS의는 다음과 같습니다 : 다음과 같이 내 코드는 내가하고 싶은 무엇

.testButton1 
{ 
font-size:100%; 
height:10%; 
    width: 25% 
} 

.testButton1 img 
{ 
height:80%; 
vertical-align:middle; 
}

는에 하나의 텍스트를 버튼의 왼쪽 가장자리에 이미지를 배치하고, 배치하는 것입니다 중앙 또는 오른쪽으로. & nbsp를 사용하면 작동하지만, 약간 미숙 한 것 같습니다. 나는 span과 div로 이미지와 텍스트를 둘러싸고 그 위치를 잡으려 고 노력했다. 그러나 그것은 엉망진창처럼 보인다.

버튼 태그 안의 내용 (서식이 지정되지 않은 경우)이 더 넓은 버튼의 가운데에 하나의 단위로 배치되어 있습니다 (버튼 폭이 자동 조정되도록 두 항목이 나란히 있기 때문에 눈에 띄지 않습니다). - 측.

어떤 도움, 언제나처럼, 감사합니다. 감사합니다. 이미지가 어느 정도 작동에

출처

2012-03-06 robert smith

ckground 이미지 접근

배경 이미지를 사용할 수 있으며 이미지 위치를 완전히 제어 할 수 있습니다.

근무 예 : http://jsfiddle.net/EFsU8/

BUTTON { 
    padding: 8px 8px 8px 32px; 
    font-family: Arial, Verdana; 
    background: #f0f0f0 url([url or base 64 data]); 
    background-position: 8px 8px; 
    background-repeat: no-repeat; 
}

약간 "예뻐"예 : :hover 및 :active 상태에 따라 버튼 http://jsfiddle.net/kLXaj/1/

그리고 another example 보여주는 조정.

자식 요소 접근

위의 예는 BUTTON뿐만 아니라 INPUT[type="button"]와 함께 작동합니다. BUTTON 태그에는 마크 업이 포함될 수 있으며 더 큰 유연성이 필요한 상황을위한 것입니다. 원래의 질문을 다시 읽은 다음 여기에 몇 가지 예가 나와 있습니다. http://jsfiddle.net/kLXaj/5/

이 방법은 버튼의 크기에 따라 이미지/텍스트를 자동으로 재배치하고 버튼의 내부 레이아웃을보다 잘 제어합니다. 왼쪽에

http://jsfiddle.net/FaNpG/1/

출처

2012-03-06 02:02:13

답장을 보내 주셔서 감사합니다. 나는 당신이 배경에서 이미지의 크기를 조절할 수 없다는 것을 읽은 것 같았다. 나는 틀린가? 다시 한번 감사드립니다. –

@robertsmith - 처음에는 질문을 오해 한 것 같습니다. 나는 나의 답을 더 많은 예제로 업데이트했다. 이게 효과가 있는지 알려주세요. –

첫 번째 답변은 훌륭했으며 모든 예를 사용한 편집은 환상적입니다! 귀하의 예제는 내가 염두에 두었던 모든 버튼 유형을 코딩하는 방법을 정확하게 보여줍니다. 시간을내어 주셔서 감사합니다. –

추가 부동 소수점 왼쪽. 패딩 및 이미지 크기 조정의 현명한 사용이 붙어 텍스트를 갖는 문제를 해결 버튼의 맨 위로 이동하십시오. jsFiddle

출처

2012-03-06 01:58:11 Drakekin

하지 CSS에서 나는이 도움이 당신이 생각하는. 필요한 경우 img에 여백을 추가하십시오.

<button style="display:inline-block"> 
    <img src="url" style="float:left;margin-right:0.5em">Caption 
</button>

출처

2012-03-06 02:07:25 Jay

이것도 작동합니다. 당신의 도움을 주셔서 감사합니다. –

정말 고마워 !! –

변경 버튼 표시 스타일 인라인 블록, IMG 플로트하기 : 버튼 안에 이미지를 사용하려면

출처

2012-03-06 02:22:20

내부 이미지 사용 <button> 요소

답변

관련 문제