如何在按鈕定位背景圖像

我有以下CSS：如何在按鈕定位背景圖像

.physButton:before { 
    content: " "; 
    display: inline-block; 
    background: url("../theImages/ste.png") no-repeat; 
    height: 38px; 
    line-height: 38px; 
    vertical-align: middle; 
    width: 52px; 
    /*margin-left: 10%;*/ 
} 
.locButton:before { 
    content: " "; 
    display: inline-block; 
    background: url("../theImages/loc.png") no-repeat; 
    height: 38px; 
    line-height: 38px; 
    vertical-align: middle; 
    width: 52px; 
    /*margin-left: 10%;*/ 
} 
.mwmButton:before { 
    content: " "; 
    display: inline-block; 
    background: url("../theImages/loc.png") no-repeat; 
    height: 38px; 
    line-height: 38px; 
    vertical-align: middle; 
    width: 52px; 
    /*margin-left: 10%;*/ 
} 
button { 
    border: 1px solid rgba(0,0,0,0.3); 
    background: #eee; 
    color: #515151; 
    font-size: 24px; 
    font-weight: 700; 
    padding: 21px 34px; 
    text-decoration: none; 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226))); 
    background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%); 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */; 
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5); 
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5); 
    text-shadow: 0 1px rgba(255,255,255,0.6); 
} 
button::-moz-focus-inner, a.button::-moz-focus-inner { 
    padding:0; 
    border:0; 
} 
button:hover, a.button:hover { 
    background: #cbcbcb; 
    cursor: pointer; 
} 
button:active, a.button:active { 
    background: #ccc; 
    padding: 22px 34px 20px; /* Bump down text */ 
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2); 
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2); 
    text-shadow: none; 
} 
.locButton { 
    background: #e1001a; 
    color: #fff; 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(192,0,22)), color-stop(0.58, rgb(226,0,26))); 
    background: -moz-linear-gradient(center bottom, rgb(192,0,22) 21%, rgb(226,0,26) 58%); 
    text-shadow: 0 1px rgba(0,0,0,0.25); 
} 
.locButton:hover { 
    background: #cb0018; 
    text-shadow: 0 1px rgba(0,0,0,0); 
} 
.locButton:active { 
    background: #ae0014; 
} 
.mwmButton { 
    background: #E05A00; 
    color: #fff; 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(192,63,0)), color-stop(0.58, rgb(224,74,0))); 
    background: -moz-linear-gradient(center bottom, rgb(192,63,0) 21%, rgb(224,74,0) 58%); 
    text-shadow: 0 1px rgba(0,0,0,0.25); 
} 
.mwmButton:hover { 
    background: #CA7700; 
    text-shadow: 0 1px rgba(0,0,0,0); 
} 
.mwmButton:active { 
    background: #AC6900; 
}

，其顯示以下內容：

enter image description here

如何修改上面的代碼的圖像對準到左邊和文本對齊如右圖所示：

enter image description here

來源

2014-03-06 Si8

你會在jsfiddle中發佈所有的html和css嗎？解決方案可能不僅僅是css更改。 – steinmas

你爲什麼用「<！ - 」隱藏你的代碼？ –

一個解決方案是在每個按鈕內部使用兩個SPAN元素。將圖像放在一個文本中，將文本放在另一個文本中，然後將SPAN元素設置爲內嵌塊級別並劃分空間。 –

HTML：

<div id="mbLOnlyButtons"> 
    <button class="mwmButton" style="width: 95%;"><span class="icon">&nbsp;</span><span class="text">My WESTMED</text></button> 
    <div style="clear: both;"><br></div> 
    <button class="physButton" style="width: 95%;"><span class="icon">&nbsp;</span><span class="text">Physicians</text></button></button> 
</div>

CSS：

button .text { width: 50%; display: inline-block; text-align:left;} 
button .icon { width: 50%; display: inline-block; background: url("http://www.westmedgroup.com/images/HealthCareReformv2.jpg") top right no-repeat; }

這會在按鈕內設置兩個單獨的區域。

來源

2014-03-06 20:07:52

在底部圖片中，圖片和文字之間的空間不同 - 只需在locButton和physButton :before僞元素上添加一點填充直到它們對齊，就需要4-10px。

來源

2014-03-06 18:56:01

你知道嗎......你可能是對的！ – Si8

在文本週圍放置一個跨度，併爲其設置一個足夠大的標準寬度（可以說100px）。現在，應用此css樣式：

width:100px; 
text-align:right;

圖標將留在左邊（它的默認位置），而文本將allign

來源

2014-03-06 19:32:53

如何在按鈕定位背景圖像

回答

相關問題