CSS按钮内文字图片布局 - 右侧图片大小调整
要将文字和图片放在按钮里,且图片在文字右边,可以使用以下的CSS样式:
HTML代码:
<button class='btn'>
<span>按钮文字</span>
<img src='图片路径' alt='图片描述'>
</button>
CSS代码:
.btn {
display: flex;
align-items: center;
}
.btn img {
width: 20px; /* 设置图片宽度 */
height: 20px; /* 设置图片高度 */
margin-left: 5px; /* 设置图片与文字之间的间距 */
}
这里使用了flex布局,将按钮内的元素水平排列,并使用align-items: center;将元素垂直居中对齐。
通过给img元素设置宽度和高度,可以改变图片的大小。使用margin-left属性可以设置图片与文字之间的间距。
注意将上述代码中的图片路径替换为你自己的图片路径。
原文地址: https://www.cveoy.top/t/topic/qc1D 著作权归作者所有。请勿转载和采集!