如何使用CSS实现按钮内文本居左、内置图片居右的布局

解决方案 #

使用Flex弹性布局调整按钮的子元素排列规则即可，只需要修改原有button的CSS样式，HTML结构无需调整：

修改后的完整代码 #

CSS部分

button {
  width: 100%;
  height: 120px; /* 可根据背景图实际尺寸调整为合适高度，原有100%需要父元素有固定高度才能生效 */
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://www.searchpng.com/wp-content/uploads/2019/01/Game-Button-PNG-copy.jpg");
  background-size: cover; /* 保证背景图铺满按钮，可根据需求调整为contain */
  /* 新增以下flex布局属性 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px; /* 左右内边距，避免内容贴边，数值可自行调整 */
  font-size: 18px; /* 可按需调整文本大小 */
}

HTML部分（仅优化img的alt属性，其余不变）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>
<body>
  <button type="button">
    <span>test</span>
    <img
      src="https://cdn.iconscout.com/icon/free/png-256/metamask-2728406-2261817.png" 
      width="60"
      alt="metamask图标"
    />
  </button>
</body>
</html>

属性说明 #

• display: flex：将按钮设置为弹性容器，直接子元素会按照弹性规则排列
• justify-content: space-between：自动分配子元素之间的空白，第一个子元素靠左对齐，最后一个子元素靠右对齐
• align-items: center：让所有子元素在垂直方向居中，避免文本和图标高低不一致
• padding：设置左右内边距，防止内容紧贴按钮边缘，视觉效果更协调

内容的提问来源于stack exchange，提问作者TechDev