如何在按钮中定位背景图像

Question

我有以下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;
}

显示以下内容：

如何修改上面的代码，图像左对齐，文本右对齐，如下所示：

Answer 1

在下图中，图像和文本之间的空间不同 - 只需在locButton和physButton :before伪元素上添加一些填充，直到它们对齐，你需要4-10px。

Answer 2

在文本周围放置一个范围，并为其提供一个足够大的标准宽度，以便所有按钮（例如100px）。现在应用这个css样式：

width:100px;
text-align:right;

图标将保留在左侧（默认位置），文本将全部

Answer 3

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; }

这会在按钮内设置两个独立的区域。