ボタンを2列にする方法テキストとアイコンを縦に中央に合わせる

Question

button image

この写真のようなHTMLボタンの作り方は？ 2行text.vertical centered。ここ

が

<button class="btn"><i class="fa fa-check bz-fa-icon"></i> 
    Confirm<br> 
    Return 
</button> 


.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; 
} 

Answer 1

変更

.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

はこれを試してみてくださいいくつかのCSSに私のコードです： あなたはまた、そのdiv要素をラップのdiv内のテキストおよびスパンをラップすることができますし、 imgを別のdivに入れてから、次のクラスを追加してください：

また、ディスプレイを追加する：インラインブロック;このコードをあなたの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; 
 
}