如何在 flex div 中垂直居中字体真棒图标？

Question

How can I vertically center the sort up and down icons with the "Column" text?

 .wrapper { display: flex; flex-direction: row; align-items: center; padding: 8px; margin: 16px; background-color: grey; width: 65px; }.icon { display: flex; align-items: center; padding: 4px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" /> <div class="wrapper"> <div>Column</div> <div class="icon"><i class="fa fa-sort-up"></i></div> </div> <div class="wrapper"> <div>Column</div> <div class="icon"><i class="fa fa-sort-down"></i></div> </div>

You can notice the icons are not vertically aligned with the text. I've tried different approaches with no success.

Answer 1

Try adding more padding or margin for the icon:

.icon {

  display: flex;
  align-items: center;
  padding: 10px 4px 4px 4px;
}

But if that doesn't work:

.icon {

    display: flex;
    align-items: center;
    padding: 4px;
    margin-top: 6px;
}

I hope this helps...

Answer 2

Please have a look:)

 .wrapper { display: flex; flex-direction: row; align-items: center; padding: 8px; margin: 16px; background-color: grey; width: 65px; }.fa-sort-down { height: 24px; margin-top: -7px;x }.fa-sort-up{ margin-top: 2px }.icon { display: flex; align-items: center; padding: 4px; margin-top:8px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" /> <div class="wrapper"> <div>Column</div> <div class="icon"><i class="fa fa-sort-up"></i></div> </div> <div class="wrapper"> <div>Column</div> <div class="icon"><i class="fa fa-sort-down"></i></div> </div>