如何将图片和文本放在按钮内并使其居中？
如何将图片和文本放在按钮内并使其居中？
提问于 2015-10-22 12:04:41
#submitCancel {
float:left;
width:49%;
height:6em;
background-color: green;
color: white;
/*font-size: 2em;*/
border-style: none;
padding: 0;
border: none;
}
#submitCancel img {
border:1px black solid;
}
.btnText {
font-size: 2em;
display: inline-block;
vertical-align: middle;
}<button type="button" id="submitCancel" onclick="closeForm();">
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png">
<span class="btnText">Cancel</span>
</button>
我尝试将图片和文本放在按钮内，并使其居中。我该怎么做呢？我
回答 3
Stack Overflow用户
发布于 2015-10-22 12:12:57
这应该是可行的。在img标签中使用align=“中间”。
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">Stack Overflow用户
发布于 2015-10-22 12:25:56
尝尝这个,
#submitCancel {
float:left;
width:49%;
height:6em;
background-color: green;
color: white;
/*font-size: 2em;*/
border-style: none;
padding: 0;
border: none;
}
#submitCancel img {
border:1px black solid;
}
.btnText {
font-size: 2em;
display: inline-block;
vertical-align: middle;
}<button type="button" id="submitCancel" onclick="closeForm();">
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="middle">
<span class="btnText">Cancel</span>
</button>
Stack Overflow用户
发布于 2015-10-22 12:34:10
有两种方法。
将vertical-align: middle;属性添加到以下类中。
#submitCancel img {
border: 1px black solid;
vertical-align: middle;
}或
将align="center"属性添加到图像标记。
<img src="http://files.softicons.com/download/android-icons/hyaline-icons-by-qishui/png/88x88/camera.png" align="center"> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33273246
复制相关文章
相似问题
腾讯云开发者
