对齐按钮中的文本
Aligning text in a button
我需要在左侧制作带有图标的按钮,我在这里找到了一个很好的例子。但是无论我怎么编辑,里面的文字都不会垂直对齐。顺便说一句,我正在使用 Bootstrap 4。有人帮忙吗?
这是原文fiddle。
这是代码:
.btn {
text-align: center;
font-size: 0.7em;
text-transform: uppercase;
background: #42473d;
padding: 1em 0.5em;
color: #fff;
}
.btn-primary:before {
font-family: 'FontAwesome';
font-size: 2em;
width: (18em / 14);
float: left;
margin: -0.5em -0.2em;
padding: 0.3em 0.6em;
background-color: #292c26;
content: "\f230";
}
.btn-secondary:before {
font-family: 'FontAwesome';
font-size: 2em;
width: (25em / 14);
float: left;
margin: -0.5em -0.2em;
padding: 0.3em 0.6em;
background-color: #292c26;
content: "\f179";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<button class="btn btn-block rounded-0">
View Using Facebook
</button>
<button class="btn btn-block rounded-0">
View Using Facebook
</button>
如果您使用 chrome 工具检查器,您可以看到您正确添加了填充,但问题出在文本本身。添加行高 initial/normal 即可解决问题。
.btn {
text-align: center;
font-size: 0.7em;
text-transform: uppercase;
background: #42473d;
padding: 1em 0.5em;
color: #fff;
line-height: initial;
}
希望能解决您的问题。
.btn {
text-align: center;
font-size: 0.7em;
text-transform: uppercase;
background: #42473d;
padding: 1em 0.5em;
color: #fff;
position: relative;
height: 40px;
overflow: hidden;
}
.btn:before {
font-family: 'FontAwesome';
font-size: 1.5em;
float: left;
padding: 4px 10px;
height: 40px;
width: 40px;
background-color: #292c26;
content: "\f230";
position: absolute;
left: 0;
top: 0;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="btn btn-block rounded-0">
View Using Facebook
</button>
<button class="btn btn-block rounded-0">
View Using Facebook
</button>
我需要在左侧制作带有图标的按钮,我在这里找到了一个很好的例子。但是无论我怎么编辑,里面的文字都不会垂直对齐。顺便说一句,我正在使用 Bootstrap 4。有人帮忙吗?
这是原文fiddle。
这是代码:
.btn {
text-align: center;
font-size: 0.7em;
text-transform: uppercase;
background: #42473d;
padding: 1em 0.5em;
color: #fff;
}
.btn-primary:before {
font-family: 'FontAwesome';
font-size: 2em;
width: (18em / 14);
float: left;
margin: -0.5em -0.2em;
padding: 0.3em 0.6em;
background-color: #292c26;
content: "\f230";
}
.btn-secondary:before {
font-family: 'FontAwesome';
font-size: 2em;
width: (25em / 14);
float: left;
margin: -0.5em -0.2em;
padding: 0.3em 0.6em;
background-color: #292c26;
content: "\f179";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<button class="btn btn-block rounded-0">
View Using Facebook
</button>
<button class="btn btn-block rounded-0">
View Using Facebook
</button>
如果您使用 chrome 工具检查器,您可以看到您正确添加了填充,但问题出在文本本身。添加行高 initial/normal 即可解决问题。
.btn {
text-align: center;
font-size: 0.7em;
text-transform: uppercase;
background: #42473d;
padding: 1em 0.5em;
color: #fff;
line-height: initial;
}
希望能解决您的问题。
.btn {
text-align: center;
font-size: 0.7em;
text-transform: uppercase;
background: #42473d;
padding: 1em 0.5em;
color: #fff;
position: relative;
height: 40px;
overflow: hidden;
}
.btn:before {
font-family: 'FontAwesome';
font-size: 1.5em;
float: left;
padding: 4px 10px;
height: 40px;
width: 40px;
background-color: #292c26;
content: "\f230";
position: absolute;
left: 0;
top: 0;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="btn btn-block rounded-0">
View Using Facebook
</button>
<button class="btn btn-block rounded-0">
View Using Facebook
</button>