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验证程序告诉我

“在这种情况下，元素div不能作为元素按钮的子元素。”

那么您应该如何在按钮内对齐元素？我没有找到解决方法：S

谢谢您的帮助！

Answer 1

您可以利用引导程序类，特别是flexbox

d-flex将按钮变成一个弹性框
align-items-center将弹性项目垂直居中

看看

<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>

在按钮HTML / Bootstrap中对齐元素

1 个答案: