无法以水平方式对齐d-flex子元素

Question

HTML：

<div class="d-flex flex-row justify-content-end" style= "height:19px">
    <div class="like-btn-svg p-2" id="idlike" style= "padding-top: 100px;"></div>
    <i class="fa fa-bookmark fa-2x p-2" style= "color: #0099CC;height:0px"></i>
</div>

CSS：

    .like-btn-svg {
        /* temp value */
        width: 80px;
        height: 95px;
        /* temp value */
        transform: translate(-50%, -50%);
        background: url(https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png) no-repeat;
        background-position: 0 0;
        cursor: pointer;
}

在图像中，类别为“ .like-btn-svg p-2”的heart（“ div”元素和类别为“ fa fa-bookmark fa-2x p-2”的书签（“ i”元素是不在水平线上(CLICK ME TO SEE THE IMAGE)

我的问题是，我希望最后两个元素都位于水平线上（SOMEONE ANSWER PLEASEEEEEEEEEEE）。

Answer 1

在父div上，添加align-items-center;以在div中垂直对齐子级。然后从此.like-btn-svg中删除transform: translate(-50%,-50%)样式。应该可以正常工作。