how to make a button two lines text and icon vertically centered

Question

how to make html button like this picture? two line text.vertical centered.

here is my code

 .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

Change some 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

Try this: You can also wrap the text and span inside a div then wrap that div and img inside another div then add these classes:

also add display: inline-block; on your 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

Change to this code.

 .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

A flexbox option:

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