• • 此问题在此处已有答案**：

How can I vertically align elements in a div?（28个答案）
Flexbox: center horizontally and vertically（14个答案）
三年前关闭了。
我有一个赫克的时间得到一些图标都出现对齐如何我想要的。
以下是情况的图像：

下面是一个jfiddle，我设置它来尝试捕获必要的细节：
https://jsfiddle.net/qtzu4ecL/1/

.topicrow-header .ld-topic-info {
    margin-left: 10px;
}

.ld-topic-info .fas, .ld-topic-info .far {
    padding-left: 10px;
    padding-right: 10px;
}

.topicrow-header.stick {
    position: sticky;
    position: -webkit-sticky;
    top: 110px;
    font-size: 26px;
    background-color: #ff9535;
    color: white;
    font-weight: 300;
}
.topicrow-header {
    z-index: 50;
    background-color: #d3d3d380;
    margin-top: 6px;
    padding: 5px;
    margin-left: 0;
    font-size: 20px;
    color: #007bff;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.ldnt-content-notes {
    text-align: center;
    display:inline;
}

.ldnt-content-notes .nt-note-tab {
    margin: 0;
    display: inline;
    color: #fff;
}

.nt-note-tab {
    display: inline;
    text-align: center;
    font-weight: bold;
    bottom: 0;
    text-decoration: none;
    border-bottom: 0 !important;
    font-size: 14px;
    box-shadow: none !important;
    transition: all ease-in-out 250ms;
    background: rgba(0,0,0,0.95);
    z-index: 9000;
}

<div class="row topicrow-header stick" >
  <div class="topic-title">Here is some topic title</div>
  <div class="ld-topic-info">
    <i class="topic-mark-complete far fa-check-circle ld-topic-complete" ></i>
    <i class="topic-mark-favorite far fa-heart fav" ></i>
    <i class="topic-mark-watched far fa-eye watch" ></i>
   <div class="ldnt-content-notes">
      <a class="nt-note-tab  shortcode" href="#" >
        <i class="fas fa-edit" ></i>
      </a>
   </div>
 </div>
</div>

我尝试了很多不同的东西，但就是不能得到它的权利。前3个图标没有div，他们只是显示为<i>元素内联。第四个图标有一个div和a元素，因为他们使用的WordPress插件。这些元素不知何故造成的问题，但我不知道如何。
我想有第4个图标显示为相同大小的前3个图标，没有黑色背景，以及，但现在只是试图解决对齐问题，使这4个图标是相互对齐，没有垂直偏移。