按钮中的中心文本，具有图像背景的选择器

Question

我试图将按钮中的文字居中。我试过text-center: center;，但没有帮助。

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

需要将文本向下移动1 px

https://jsfiddle.net/8dz1tfw7/1/

Answer 1

将建议使用flex作为该按钮

.test.btn1 {
  display: flex;
  align-items: center;
}

见下文

＆＃13;

＆＃13;

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

＆＃13;

<button id="test" class="btn1" style="margin-left:8px;"><span>Button 1</span></button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试添加

vertical-align: center;

而不是

vertical-align: middle;