Question

我正在使用Bootstrap 4.我正在制作一个左侧有一个图标，中间有两行文字的按钮。我想出了一切，除了如何垂直对齐文本。我尝试用填充和边距移动它，但没有。它被困在顶端。

这是我的代码：

＆＃13;

.wrap {
  width: 370px;
  background: #ededed;
}
.btn {
  font-size: 10px;
  background-color: gray;
  color: #fff;
}
span {
  display: block;
  text-transform: lowercase;
  font-size: 8px;
}
i {
  font-size: 20px;
  float: left;
  background-color: black;
  padding: 17px 20px;
  margin-left: -15px;
}

＆＃13;

<div class="wrap p-4">
  <button type="button" class="btn border-0 py-0 rounded-0 btn-secondary btn-block">
    <i class="fa fa-apple" aria-hidden="true"></i>
    Title Goes Here
    <span>Subtitle Goes Here</span>
  </button>
</div>

＆＃13;

我做错了什么？

谢谢！

Answer 1

添加引导样式时，它似乎是垂直居中的。

＆＃13;

.wrap {
  width: 370px;
  background: #ededed;
}
.btn {
  font-size: 10px;
  background-color: gray;
  color: #fff;
}
span {
  display: block;
  text-transform: lowercase;
  font-size: 8px;
}
i {
  font-size: 20px;
  float: left;
  background-color: black;
  padding: 17px 20px;
  margin-left: -15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrap p-4">
  <button type="button" class="btn border-0 py-0 rounded-0 btn-secondary btn-block">
    <i class="fa fa-apple" aria-hidden="true"></i>
    Title Goes Here
    <span>Subtitle Goes Here</span>
  </button>
</div>

＆＃13;

在按钮中居中两行文本

1 个答案: