Stack Exchange
Center text in button which has before selector with image background
I'm trying to center text in my button. I tried text-center: center; but it didn't help.
<button id="test" class="btn1" style="margin-left:8px;">Button 1</button>

css:
.btn1 {
    display: inline-block;
    border: 1px solid #ccc;
    text-decoration: none;
    word-wrap: normal;
    vertical-align: middle;
    text-center: center;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    padding: 0 6px 0 5.5px;
    height: 24px;
    color: #6D6D6D;
    background-color: #fafafa;
    font-size: 11px;
    font-family: "Roboto";
    font-weight: 500;
}

.btn1:before {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsSAAALEgHS3X78AAAAq0lEQVRYhe3ZOw7CQBCDYXuziRBISOH+FbfiAogKKlLsJhkKHhWNq2zhTz7Ar2mHl+t5ONxjzUBge2Say/OUh/1jd7zF2jeTVRHMEV2sfTvXAhDRvWt+a0EAkbaO+M9ZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZigzwuxZ8YjK5MFUAbbyiyFTJJZdpBKOdxx3TXKbxBb7NLc+2MdrpAAAAAElFTkSuQmCC') no-repeat left center transparent;
    background-size: 100% 100%;
    width: 14px;
    height: 14px;
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 1px;
    margin-left: 3px;
    margin-right: 8px;
}

.btn1:hover {
    background: black;
    background-image: -webkit-linear-gradient(top, #f7f9fa, #eff5f7);
    background-image: -ms-linear-gradient(top, #f7f9fa, #eff5f7);
    background-image: -o-linear-gradient(top, #f7f9fa, #eff5f7);
    background-image: linear-gradient(to bottom, #f7f9fa, #eff5f7);
}

It needs moving text down by 1 px
https://jsfiddle.net/8dz1tfw7/1/


No-one is going to notice a 1px difference. Button text is automatically centered so I'd suggest its the image that's off by 1px...especially as you have margin on it.

@Paulie_D I changed some padding and margins: https://jsfiddle.net/8dz1tfw7/2/ now it's as I wanted, but still I didn't want to use margin/padding properties, but just vertically center text and image with something like text-center: center;

Will advised to use flex for that button
.test.btn1 {
  display: flex;
  align-items: center;
}

see below


.btn1 {
    /**display: inline-block;**/
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    text-decoration: none;
    word-wrap: normal;
    vertical-align: middle;
    text-center: center;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
 padding: 0 6px 0 5.5px;
    height: 24px;
    color: #6D6D6D;
    background-color: #fafafa;
    font-size: 11px;
 font-family: "Roboto";
 font-weight: 500;
}

.btn1:before {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsSAAALEgHS3X78AAAAq0lEQVRYhe3ZOw7CQBCDYXuziRBISOH+FbfiAogKKlLsJhkKHhWNq2zhTz7Ar2mHl+t5ONxjzUBge2Say/OUh/1jd7zF2jeTVRHMEV2sfTvXAhDRvWt+a0EAkbaO+M9ZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZCmcpnKVwlsJZigzwuxZ8YjK5MFUAbbyiyFTJJZdpBKOdxx3TXKbxBb7NLc+2MdrpAAAAAElFTkSuQmCC') no-repeat left center transparent;
    background-size: 100% 100%;
    width: 14px;
    height: 14px;
 content: '';
    display: inline-block;
    vertical-align: middle;
 margin-bottom: 1px;
 margin-left: 3px;
 margin-right: 8px;
}

.btn1:hover {
 background: black;
 background-image: -webkit-linear-gradient(top, #f7f9fa, #eff5f7);
 background-image: -ms-linear-gradient(top, #f7f9fa, #eff5f7);
 background-image: -o-linear-gradient(top, #f7f9fa, #eff5f7);
 background-image: linear-gradient(to bottom, #f7f9fa, #eff5f7);
}
<button id="test" class="btn1" style="margin-left:8px;"><span>Button 1</span></button>




Looks great. And if I want inline I can use display: inline-flex;

Try adding
vertical-align: center;

Instead of
vertical-align: middle;


both of them works fine when there is no before selector with background image, but I have one..
