html - 对齐按钮内的内容

Question

我已经使用 Google Material Icons 在按钮中的文本之前添加“播放” Logo 。然而，在插入图标后，文本和图标都稍微偏离了它们的位置并且没有保持它们的居中对齐。如何使它们对齐？

.play{
    border: 1px solid black;
    border-radius: 20px;
    padding: 5px 25px;
    text-transform: uppercase;
    margin: 10px;
    background-color: transparent;
    color: black;
}

.play::before{
    font-family: 'Material Icons';
    content: 'play_circle_filled';
    position: relative;
    text-transform: lowercase;
    font-size: 18px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container d-flex flex-row justify-content-center buttons" style="font-size: 12px;">
                    
                   
<button type="button" class="play"><span class="playicon"></span>Play into video</button>
                </div>

Answer 1

只需添加 align-items-center 并使按钮 d-flex 也...

<div class="container d-flex align-items-center justify-content-center buttons">
    <button type="button" class="play d-flex align-items-center"><span class="playicon"></span> Play into video</button>
</div>

https://www.codeply.com/go/iOqyT71QKy

注意:您不需要 flex-row，因为 flex-direction:row 是默认值。