无法以水平方式对齐 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;
}

图片中的心脏（"div" 元素 class ".like-btn-svg p-2"）和书签（"i" 元素 class "fa fa-bookmark fa-2x p-2") 图标不在水平直线上(CLICK ME TO SEE THE IMAGE)

我的问题是我想要最后水平线上的那些元素（SOMEONE ANSWER PLEASEEEEEEEEE）。

Answer 1

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

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

Not able to align d-flex child elements in a horizontal way

html

css

flexbox

responsive-design

twitter-bootstrap