제출 단추 안에 이미지와 텍스트 삽입

Question

제출 단추에 텍스트와 비행기의 작은 이미지를 삽입하려고합니다. 불행히도, 텍스트가 이미지에 겹쳐서 어떻게 정렬할지 모릅니다. 단추의 오른쪽으로 텍스트를 "이동"시킬 수 있습니까? 더 좋은 방법이 있을까요? 감사.

input[type="submit"] { 
    width: 230px; 
    height: 40px; 
    border: none; 
    background: url(../Images/Plane.png) #ff9900 no-repeat right; 
    color: #fff; 
    cursor: pointer; 
} 

이는 HTML입니다

<input type="submit" value="SEND" id="submitForm"> 

Answer 1

그냥이 atribute 추가

text-align:right; 

Answer 2

이 질문에 중복이를 ... HTML: How to make a submit button with text + image in it?

의 요점 이미지가 배경 태그 대신 이미지 태그에 있어야합니다. 텍스트와 이미지의 위치에 영향을 미칩니다. 텍스트와 별도로 작동하는 배경 이미지가 나에게별로 의미가 없으므로 버튼 내부의 이미지 태그로 배경 이미지를 변경해보십시오.

Answer 3

오히려 padding 균형을하는 것보다 필요한 정렬 방법 단지 '버튼과 같은'행동 및 다른 (비 대화식) HTML 개체 포함 수행 할 수있는 <button> 요소 사용에 대한 :

<button type="submit" id="submitForm"> 
    <img src="../Images/Plane.png" /> Send 
</button> 

을

CSS를 사용하여 :

#submitForm { 
    width: 230px; 
    height: 40px; 
    border: none; 
    background-color: #ff9900; 
    color: #fff; 
    cursor: pointer; 
    text-transform: uppercase; 
} 

#submitForm img { 
    float: right; 
}