sử dụng hình ảnh bên trong <button> yếu tố

Question

Tôi đang cố gắng bao gồm hình ảnh và một số văn bản bên trong phần tử nút. Mã của tôi là như sau:

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

CSS là:

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

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

Những gì tôi muốn làm là định vị hình ảnh để cạnh trái của nút, và vị trí của văn bản hoặc trong trung tâm hoặc bên phải. Sử dụng & nbsp hoạt động, nhưng có lẽ hơi thô. Tôi đã cố gắng để bao quanh các hình ảnh và văn bản với nhịp hoặc divs và sau đó định vị những người, nhưng điều đó dường như mess điều lên. Điều gì dường như đang xảy ra là bất kỳ thứ gì bên trong thẻ nút (trừ khi được định dạng) được định vị là một đơn vị ở giữa nút rộng hơn (không đáng chú ý nếu chiều rộng của nút được để tự động điều chỉnh vì cả hai mặt đều ở bên cạnh). -side.

Bất kỳ sự giúp đỡ, như mọi khi, được đánh giá cao. Cảm ơn bạn.

Answer 1

Ba Cách tiếp cận hình ảnh ckground

Bạn có thể sử dụng hình nền và có toàn quyền kiểm soát định vị hình ảnh.

dụ làm việc: 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; 
}​ 

Một hơi "đẹp" dụ: http://jsfiddle.net/kLXaj/1/

Và another example hiện điều chỉnh các nút dựa trên :hover và :active tiểu bang.

Yếu tố trẻ em tiếp cận

Ví dụ trước đây sẽ làm việc với một INPUT[type="button"] cũng như BUTTON. Thẻ BUTTON được phép chứa đánh dấu và được dành cho các tình huống yêu cầu sự linh hoạt cao hơn. Sau khi đọc lại câu hỏi ban đầu, dưới đây là một số ví dụ khác: http://jsfiddle.net/kLXaj/5/

Cách tiếp cận này sẽ tự động định lại hình ảnh/văn bản dựa trên kích thước của nút và cung cấp nhiều quyền kiểm soát bố cục bên trong của nút.

Answer 2

Thêm float trái sang hình ảnh hoạt động để một mức độ nào đó. một sử dụng khôn ngoan của padding và kích thước hình ảnh sửa chữa vấn đề với việc có văn bản bị mắc kẹt ở trên cùng của nút. Xem này jsFiddle.

Answer 3

Nếu bạn muốn sử dụng hình ảnh bên trong các nút không trong CSS Tôi nghĩ rằng đây sẽ giúp bạn:

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

Answer 4

Thay đổi nút hiển thị phong cách để inline-block, img phao sang trái. Thêm lề vào img khi cần thiết.

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