홈>
아래 CSS를 사용하고 있지만 버튼 중앙에 이미지를 넣습니다.
<input type="button">
를 사용하여 아이콘을 왼쪽 또는 오른쪽으로 정렬하는 방법
텍스트와 이미지가 잘 맞고 잘 정렬되도록 하시겠습니까?
background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
- 답변 # 1
- 답변 # 2
버튼 이미지가 16 x 16 픽셀이라고 가정하면 원하는 작업을 수행해야합니다.
button
<input type="button" value="Add a new row" class="button-add" />
예제 버튼 :
업데이트
Low를 사용하면이 믹스 인이 유용 할 수 있습니다.
input.button-add { background-image: url(/images/buttons/add.png); /* 16px x 16px */ background-color: transparent; /* make the button transparent */ background-repeat: no-repeat; /* make the background image appear only once */ background-position: 0px 0px; /* equivalent to 'top left' */ border: none; /* assuming we don't want any borders */ cursor: pointer; /* make the cursor like hovering over an <a> element */ height: 16px; /* make this the size of your image */ padding-left: 16px; /* make text start to the right of the image */ vertical-align: middle; /* align the text vertically centered */ }
위의 내용으로 컴파일
.icon-button(@icon-url, @icon-size: 16px, @icon-inset: 10px, @border-color: #000, @background-color: transparent) { height: @icon-size * 2; padding-left: @icon-size + @icon-inset * 2; padding-right: @icon-inset; border: 1px solid @border-color; background: @background-color url(@icon-url) no-repeat @icon-inset center; cursor: pointer; } input.button-add { .icon-button("http://placehold.it/16x16", @background-color: #ff9900); }
JSFiddle
- 답변 # 3
input.button-add { height: 32px; padding-left: 36px; padding-right: 10px; border: 1px solid #000000; background: #ff9900 url("http://placehold.it/16x16") no-repeat 10px center; cursor: pointer; }
이것이 도움이 되길 바랍니다.
- 답변 # 4
스프라이트 시트를 사용하는 경우 불가능하며 요소를 줄 바꿈해야합니다.
<button type="submit" style="background-color:transparent; border-color:transparent;"> <img src="images/button/masuk.png" height="35"/> </button> <button type="reset" style="background-color:transparent; border-color:transparent;"> <img src="images/button/reset.png" height="35"/> </button>
이 바이올린을 확인하십시오 : http://jsfiddle.net/AJNnZ/
- 답변 # 5
이 트릭을 시도해보십시오!
1) 다음과 같이하십시오 :
.btn{ display: inline-block; background: blue; position: relative; border-radius: 5px; } .input, .btn:after{ color: #fff; } .btn:after{ position: absolute; content: '@'; right: 0; width: 1.3em; height: 1em; } .input{ background: transparent; color: #fff; border: 0; padding-right: 20px; cursor: pointer; position: relative; padding: 5px 20px 5px 5px; z-index: 1; }
두 번째) 스타일!
<label for="img"> <input type="submit" name="submit" id="img" value="img-btn"> <img src="yourimage.jpg" id="img"> </label>
깨끗하지는 않지만 일을 할 것입니다!
<style type="text/css"> img:hover { cursor: pointer; } input[type=submit] { display: none; } </style>
관련 질문
- html : 선택 입력을 클릭할 때 배경 이미지가 확대되는 이유
- html : Mkdocs의 일부 페이지에만 CSS 요소 적용
- javascript : 이 code를 더 잘 작성하고 유사하게 만드는 방법은 무엇입니까? 자바스크립트
- html : 내부 테이블의 내용을 중앙으로 가져오기
- javascript : 이미지 위에 여러 색상이 있는 CSS 오버레이
- javascript : CSS가 추가되면 JS 색상 변경이 작동을 멈춥니다.
- javascript : 동일한 이름을 가진 여러 클래스에 액세스하고 변경하고 반복하여 클릭 시 CSS 변경 사항을 추가하는 방법은 무엇입니까?
- html : cfml 페이지에서 css가 있는 가운데 확인란
- javascript : HTML/CSS 슬라이더가 올바르게 반복되지 않음
- html : 팝업 메뉴가 페이지 여백을 엉망으로 만듭니다.
input
를 반드시 사용해야하는 경우 , 이것을 시도하십시오 :일반적으로
그러나 pyzwyz의 브라우저 구현 제출이 일치하지 않으며button
를 사용하는 것이 조금 더 쉽습니다img
와 함께 내부 :button
에서 모든 버튼 값이 전송된다는 사실 다중 제출 양식에서 "버튼 클릭"감지를 종료합니다.