如何使按鈕兩行文字和圖標垂直居中

Question

如何使html按鈕像這樣的圖片？ 兩行text.vertical居中。

這是我的代碼

 .btn { display: block; background: #ffffff; box-shadow: none; border: 1px solid #CECECE; border-radius: 4px; margin-bottom: 5px; color: #19d197; } .bz-fa-icon { margin-right: 5px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <button class="btn"><i class="fa fa-check bz-fa-icon"></i> Confirm<br> Return </button> 

Answer 1

更改一些CSS

.btn {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #cecece;
    border-radius: 4px;
    box-shadow: none;
    color: #19d197;
    display: block;
    margin-bottom: 5px;
    padding: 0 10px 0 30px;
    position: relative;
}
.bz-fa-icon {
    left: 5px;
    margin-right: 5px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    vertical-align: middle;
}

https://jsfiddle.net/8kwyjsho/

Answer 2

嘗試以下操作：您還可以將文本和span包裹在div中，然后將該div和img包裹在另一個div中，然后添加以下類：

還添加顯示：inline-block; 在您的img上

 .center { position: relative; top: 50%; transform: translateY(-50%); } .btnText { vertical-align: middle; display: inline-block; } body { padding: 20px; } .button { background: #000; color: #fff; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; height: 120px; padding: 30px 50px; display: inline-block; } span { font-size: 11px; color: #ccc;; display: block; } img { vertical-align: middle; display: inline-block; } .center { position: relative; top: 50%; transform: translateY(-50%); } .btnText { vertical-align: middle; display: inline-block; } 

 <a class="button" href=""> <div class="center"> <img src="http://dummyimage.com/30x30/cf97cf/fff"> <div class="btnText"> Button <span>Button alt</span> </div> </div> </a> 

Answer 3

更改為此代碼。

 .btn { width:80px; height:40px; display: block; background: #ffffff; box-shadow: none; border: 1px solid #CECECE; border-radius: 4px; margin-bottom: 5px; color: #19d197; } .bz-fa-icon { display: block; float:left; margin-top:9px; margin-right: 5px; } 

Answer 4

一個flexbox選項：

 .btn { display: inline-flex; align-items: center; /* vertical alignment of items */ line-height: 16px; padding: 5px 13px; background: none; border: 1px solid #CECECE; border-radius: 3px; color: #19d197; } .inner { text-align: left; padding-left: 7px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <button class="btn"><i class="fa fa-check bz-fa-icon"></i> <div class="inner">Confirm <br /> Return</div> </button>