如何將文本與列表中的邊框中心對齊？

Question

這就是我所擁有的：

ul.timeline > li.cancelled:before {
    border: 2px solid grey;
    content: "\f05e";
    color: grey;
    text-align: center;
    font-family: FontAwesome;
}

我正在嘗試對齊它，以便圖標保持在中間。 我已經嘗試過margin-top和padding-top ，但是圖標本身向下移動了，所以我認為添加padding-bottom會起作用，但這並沒有改變 alignment。 知道如何使用它嗎？

https://jsfiddle.net/6x8zku9m/

<div class="container">
<div class="row">

    <ul class="timeline">
        <li class="clickable review-component-nav selected cancelled"></li>
    </ul>

</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

ul.timeline {
    list-style-type: none;
    position: relative;
}

ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}

ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #000000;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

ul.timeline > li.cancelled:before {
    border: 2px solid grey;
    content: "\f05e";
    color: grey;
    text-align: center;
    font-family: FontAwesome;
}

ul.timeline > li.selected {
    font-weight: bold;
}

Answer 1

您可以利用 CSS flexbox並看到魔力。

ul.timeline > li.cancelled:before {
    border: 2px solid grey;
    content: "\f05e";
    color: grey;
    text-align: center;
    font-family: FontAwesome;
    display: flex;
    justify-content: center;
    align-items: center;
}