在按钮内对齐项目

Question

我试图仅使用HTML和CSS在按钮中的书写文字旁边对齐三角形。对于我的一生，我记得如何。

.room-info-btn {
  background-color: #FFA500;
  color: #fff;
  border-radius: 4px;
  padding: 5px 11px;
  font-size: 20px;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
}

<li>
  <button class="room-info-btn" id="room-info-btn">
    <div class="arrow-down"></div> 
    Rooms / Availability
  </button>
</li>

Answer 1

尝试显示：内联表；在向下箭头的类中以与文本对齐

Answer 2

我强烈建议签出Flexbox。

对于您的代码，您可以简单地将以下CSS添加到.room-info-btn选择器：

display: flex;
align-items: center;

这使对齐许多项目变得非常简单，并为您提供其他伸缩控制选项。

Answer 3

尝试一下。我猜Flexbox是更好的选择。在这里看看：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.room-info-btn {
  background-color: #FFA500;
  color: #fff;
  border-radius: 4px;
  padding: 5px 11px;
  font-size: 20px;
  display: flex;
  align-items:center;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
}

<li>
  <button class="room-info-btn" id="room-info-btn">
    <div class="arrow-down"></div> 
    Rooms / Availability
  </button>
</li>