将文本与按钮内的图标对齐

Posted 2023-03-15

【中文标题】将文本与按钮内的图标对齐

【英文标题】：Aligning text to icon within a button

【发布时间】：2021-08-25 15:28:40

【问题描述】：

我创建了一个按钮，其中包括一个 bin 图标和“删除”一词 - 图标应设置在左侧，文本和黑色按钮内的高度相同。无论我尝试什么都行不通，谁能告诉我哪里出错了？？

这是一个简化的小提琴： https://jsfiddle.net/1q5s0cg8/13/

.btn 
  background-color: rgb(39, 40, 42);
  border-radius: 0px;
  height: 48px;
  width: 112px;
  margin-left: 12px;


.icon 
  background-color: red;
  height: 32px;
  width: 32px;


span 
  font-size: 12px;
  color: rgb(255, 255, 255);

<div class="btn">
  <div class="icon"></div>
  <span>Remove</span>
</div>

【参考方案1】：

图标需要内联显示（在本例中为inline-block）并设置vertical-align: middle 以垂直对齐两个元素。

问题是div元素默认使用显示block，它总是占据整行并向下推其他内容。

（我还设置了.icon 以匹配.btn 的高度，假设这是预期的结果）

.btn 
  background-color: rgb(39, 40, 42);
  border-radius: 0px;
  height: 48px;
  width: 112px;
  margin-left: 12px;


.icon 
  background-color: red;
  /* Removed this height: */
  /* height: 32px; */ 
  width: 32px;
  
  /* New styles: */
  display: inline-block;
  vertical-align: middle;
  height: 100%;


span 
  font-size: 12px;
  color: rgb(255, 255, 255);

<div class="btn">
  <div class="icon"></div>
  <span>Remove</span>
</div>

【参考方案2】：

有两种方法可以做到这一点。

在要并排显示的元素上使用display: inline-block;。 使用display: flex；我觉得它很容易使用。

1 - 这是使用display: inline-block; 的一个。在这种情况下，并排显示项目的样式将应用于项目本身。

.btn 
  background-color: rgb(39, 40, 42);
  border-radius: 0px;
  height: 48px;
  width: 112px;
  margin-left: 12px;


.icon 
  background-color: red;
  height: 32px;
  width: 32px;
  display: inline-block;
  vertical-align: top;


span 
  font-size: 12px;
  color: rgb(255, 255, 255);
  display: inline-block;
  vertical-align: top;

<div class="btn">
  <div class="icon"></div>
  <span>Remove</span>
</div>

2 - 这是使用display: flex; 的一个。而在这种情况下，flex 样式将应用于两个元素的父级。

.btn 
  background-color: rgb(39, 40, 42);
  border-radius: 0px;
  height: 48px;
  width: 112px;
  margin-left: 12px;
  display: flex;
  align-items: flex-start;
  flex-direction: row;


.icon 
  background-color: red;
  height: 32px;
  width: 32px;


span 
  font-size: 12px;
  color: rgb(255, 255, 255);

<div class="btn">
  <div class="icon"></div>
  <span>Remove</span>
</div>

Fiddle with display: inline-block

Fiddle with display: flex