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属性可以设置图片与文字之间的间距。
注意将上述代码中的图片路径替换为你自己的图片路径。
原文地址: http://www.cveoy.top/t/topic/ivvd 著作权归作者所有。请勿转载和采集!