如何將文本居中對齊

Question

我正在嘗試使用 glyphicon 創建一個鏈接，我希望我的圖標和文本居中對齊。 我嘗試了填充和邊距，但它同時移動了圖標和文本，我只想移動文本。 這是我的代碼

 .quick-links{ margin-left: 15px; line-height: 2; font-family: 'arial rounded MT'; border:1px solid; } .text-position{ display:inline-block; font-size:18px; padding:0px 0px 0px 5px; margin: 0px 0px -15px 0px; } .quick-link-text a{ font-weight:500; } .quick-link-text a:hover{ text-decoration: none; font-weight:1000; } .glyphicon-plus-sign{ font-size:24px; }

 <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"> <div class="quick-links col-lg-4 col-md-4"> <h3> Quick Links </h3> <div class="quick-link-text"> <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> First Link</div></a> </div> <div class="quick-link-text"> <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> Second Link</div></a> </div> </div>

Answer 1

 .quick-links{ margin-left: 15px; line-height: 2; font-family: 'arial rounded MT'; border:1px solid; } .text-position{ display:inline-block; font-size:18px; padding:0px 0px 0px 5px; margin: 0px 0px -15px 0px; } .quick-link-text a{ font-weight:500; display: flex; align-items: flex-start; } .quick-link-text a:hover{ text-decoration: none; font-weight:1000; } .glyphicon-plus-sign{ font-size:24px; }

 <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"> <div class="quick-links col-lg-4 col-md-4"> <h3> Quick Links </h3> <div class="quick-link-text"> <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> First Link</div></a> </div> <div class="quick-link-text"> <a href="#" class="glyphicon glyphicon-plus-sign"><div class="text-position"> Second Link</div></a> </div> </div>

Answer 2

不想使用 flexbox？ 您可以使用位置屬性。

.quick-link-text a {
  font-weight: 500;
  position: relative;
  padding: 0 25px;
}
.glyphicon-plus-sign:before {
  position: absolute;
  bottom: -5px;
  left: 0px;
}