すべてのボタン、フォントが縦にダウンいくつかを見て途中

Question

.--float-left { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.form-add-button { 
 
    height: auto; 
 
    padding: 0px 49px 0px 49px; 
 
    background-color: none; 
 
    border: 1px solid #14cc7b; 
 
    border-radius: 50px; 
 
    color: #14cc7b; 
 
    line-height: 40px; 
 
    float: left; 
 
    height: 40px; 
 
    /*display:table-cell;*/ 
 
    /*vertical-align:middle;*/ 
 
}

<div class="--float-left"> 
 
<a href="#" class="form-add-button"> 
 
    <i class="fa fa-plus"></i> Add New 
 
</a> 
 
</div>

で、私はそれが私が真ん中が、ノートパソコンに垂直意味よさそうだ、ここで1080pのディスプレイでも、いくつかのトリッキーな問題を持っていません画面1366x768それはちょうど添付画像のように、底に近く見えます。

Answer 1

ボタンをフレックスボックスとして定義します。水平と垂直の配置は完璧です。

.--float-left { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.form-add-button { 
 
    height: auto; 
 
    padding: 0px 49px 0px 49px; 
 
    background-color: none; 
 
    border: 1px solid #14cc7b; 
 
    border-radius: 50px; 
 
    color: #14cc7b; 
 
    line-height: 40px; 
 
    height: 40px; 
 
    width: 80px; 
 
    display:flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    /*vertical-align:middle;*/ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="--float-left"> 
 
<a href="#" class="form-add-button"> 
 
    <i class="fa fa-plus"></i> Add New 
 
</a> 
 
</div>

Answer 2

あなたはあなたの例ではそうであるようにあなたが行の高さと垂直中心場合は、ほとんどのアイコン、フォントのベースラインは、テキストのフォント異なるため、アイコンが視覚的にテキストの上に配置されます。ほとんどの場合、アイコン1pxをposition:relativeとtop:1pxでプルダウンして修正できます。より洗練されたソリューションは、transform:translateY(1px)を追加することです。 は

body { 
 
    margin: 2rem; 
 
} 
 

 
.--float-left { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.form-add-button { 
 
    background-color: none; 
 
    border: 1px solid #14cc7b; 
 
    border-radius: 50px; 
 
    color: #14cc7b; 
 
    padding: 0 50px; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    height: 40px; 
 
    line-height: 40px; 
 
} 
 

 
/* works in most cases of icon-fonts */ 
 
.form-add-button i { 
 
    position: relative; 
 
    top: 1px; 
 
    margin-right: 4px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a href="#" class="form-add-button"> 
 
    <i class="fa fa-plus"></i> Add New 
 
</a>