html - 对齐按钮内的元素

Question

我正在尝试仅使用 HTML 和 CSS 对齐按钮中书写文本旁边的三 Angular 形。对于我的一生，我记得是怎么做到的。

.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

我强烈建议查看 Flexbox .

对于您的代码，您只需将以下 css 添加到您的 .room-info-btn 选择器:

display: flex;
align-items: center;

这使得对齐许多元素变得非常简单，并为您提供了其他 flex 控件选项。