我正在尋找一種更優雅的方式來將正確的圖標與左邊的文字垂直對齊,因爲負邊距可能會有點瑕疵。將圖標與文字對齊而不使用負邊距
div.main {
border: 1px solid black;
padding: 14px;
}
div.icons {
margin-top: -1.65em;
}
div.icon {
font-size: 2rem;
color: blue;
border: 0.1px solid blue;
border-radius: 3px;
margin-left: -1px;
padding: 3px;
float: right;
}
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="main">
<div class="summary">Some text</div>
<div class="icons pull-right">
<div class="icon fa fa-line-chart">
</div>
<div class="icon fa fa-bar-chart">
</div>
</div>
</div>
最好使用'和'垂直對齊顯示直列block':middle'。你避免做一些事情,比如設置不太好的負值。 – Mardzis
@Mardzis我會補充說,任何「幻數」都是脆弱的,因爲如果你總是需要重新設置它們,如果你只需要重構一小部分,那麼你最終會做太多的工作 –