我正在尝试制作一个带有图像的按钮和一些文本.我希望图像在左边对齐,文本完全居中.文本应该以整个按钮的宽度为中心,而不是图像的剩余宽度.
我尝试了跨度但没有成功
<a href=#><button class="lightgray-btn rightbuttons"><span class="demoimage"><img class="btnimg" src="..." alt="" /></span><span class="demotext">"some text</span></button></a>
Run Code Online (Sandbox Code Playgroud)
我也想避免使用background-image:url,因为在移动设备中我担心文本会出现在图像上
谢谢
这对你有用.
button {
position: relative;
padding: 15px 40px;
text-align: center;
}
.btnimg {
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
}Run Code Online (Sandbox Code Playgroud)
<button class="lightgray-btn rightbuttons">
<img class="btnimg" src="http://lorempixel.com/output/food-q-c-27-24-8.jpg" alt="" />
some text
</button>Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4393 次 |
| 最近记录: |