我正在尝试设置一个按钮,其格式与图像1中的格式相同。
我的div左侧有背景红色,在该div内有一个图像,并且我希望此图像在div的中心对齐。
然后我的红色div右边有按钮的文本。
图片1:
但是我有什么是这样的:
图片2
我的图片没有位于红色div的中心,并且按钮文字卡在了div中。
你看到我做错了什么吗?
这是我摆弄的我的 fiddle :http://jsfiddle.net/nXuU2/2/
这是我的HTML
<button class="btn">
<div id="btn_container"><img src="http://placehold.it/30x30" width="30" height="30"/></div>
<span>Button link 1</span>
</button>
而我的CSS:
.btn
{
position: relative;
width: 200px;
height: 60px;
margin-bottom:20px;
padding: 0 10px;
text-align: left;
font-size: 16px;
color: #333;
background:gray;
}
#btn_container
{
width:40px;
height:40px;
border-radius:5px;
background:red;
float:left;
}
.btn img
{
margin-right: 10px;
vertical-align:middle;
}
.btn span
{
display:inline-block;
width: 120px;
vertical-align:middle;
}
最佳答案
只需在此处使用CSS定位,将div
设置为红色背景position: relative;
,并将absolute
用作img
标记
Demo
.btn img {
left: 50%;
margin-left: -15px; /* 1/2 of total width of your img */
top: 50%;
margin-top: -15px; /* 1/2 of total height of your img */
position: absolute;
}
Demo 2(替代方法,您无需CSS定位)
在演示2中,您不需要CSS定位,只需从
margin-right
中删除.btn img
并在text-align: center;
上使用#btn_container
,最后将margin-top
应用于.btn img
我认为
background-color
不需要包装元素,只需将其应用于img
标记即可,因此,如果您不想使用包装元素,则可以引用下面的解决方案..CSS
.btn img {
display: inline-block;
vertical-align: middle;
background: #f00;
padding: 5px;
border-radius: 5px;
}
HTML
<button class="btn">
<img src="http://placehold.it/30x30" width="30" height="30"/>
<span>Button link 1</span>
</button>
Demo 3
关于html - 尝试在<button>中使用图像和文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24960456/