要将文字和图片放在按钮里,且图片在文字右边,可以使用以下的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属性可以设置图片与文字之间的间距。

注意将上述代码中的图片路径替换为你自己的图片路径。

CSS按钮内文字图片布局 - 右侧图片大小调整

原文地址: https://www.cveoy.top/t/topic/qc1D 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录