html - 对齐按钮 HTML/Bootstrap 中的元素

Question

我有一个带有 1. 图标和 2. 一些普通文本的按钮。问题是图标和文本在按钮内的高度不同。我认为这样的事情会起作用:

        <div style="text-align: center;">
            <button class="btn btn-outline-dark btn-lg">
                <div class="row">
                    <i class="material-icons md-48">hourglass_full</i>
                    Some Text
                </div>
            </button>
        </div>

它确实有效，但是 w3c 验证器告诉我，

"Element div not allowed as child of element button in this context."

那么您应该如何对齐按钮内的元素呢？我没有找到解决方案:S

提前感谢您的帮助!

Answer 1

您可以利用 Bootstrap 类，特别是 flexbox

• d-flex 将使按钮成为 flexbox
• align-items-center 将 flex 元素垂直居中

看看

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="p-5">
  <button class="btn btn-outline-dark btn-lg d-flex align-items-center m-auto">
   <i class="material-icons md-48">hourglass_full</i>
   <span class="ml-2">Some Text</span>
 </button>
</div>