我有如下的 css 和 html。这里的文本和图像不在同一行。我希望两者都在同一行并垂直居中。
.online:before {
content: url(http://www.dreamaion.com/img_icons/on.png);
}
.butt {
margin: 0 auto;
text-align: center;
cursor: pointer;
display: inline-block;
background: #0d92d9;
color: #ffffff;
font-size: 22px;
padding: 13px;
text-decoration: none;
margin: 22px 0px 22px 0px;
}
<div class="online butt">Download</div>
<br>
最佳答案
将以下设置添加到before 伪元素:
vertical-align: middle;
display: inline-block;
.online::before {
content: url(http://www.dreamaion.com/img_icons/on.png);
vertical-align: middle;
display: inline-block;
}
.butt {
margin: 0 auto;
text-align: center;
cursor: pointer;
display: inline-block;
background: #0d92d9;
color: #ffffff;
font-size: 22px;
padding: 13px;
text-decoration: none;
margin: 22px 0px 22px 0px;
}
<div class="online butt">Download</div>
<br>
关于html - 在具有图像的按钮中垂直居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33667483/