CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Retros
Retros

Reputation: 3611

Center two rows of text in a button

I'm using Bootstrap 4. And I'm making a button that has an icon on the left side and two rows of text in the middle. I figured out everything, except how to vertical align the text. I tried to move it with both padding and margin, but nothing. It's stuck to the top.

Here's my code:

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

What am I doing wrong?

Thank you!

Upvotes: 0

Views: 269

Answers (2)

Jordan Soltman
Jordan Soltman

Reputation: 3873

When you add the bootstrap styling, it appears to be vertically centered.

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

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

Make the icon and text a flex layout, then use the flex helper classes to align the text.

.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/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">
    <div class="d-flex">
      <i class="fa fa-apple" aria-hidden="true"></i>
      <div class="d-flex align-items-center flex-column justify-content-center col">
        Title Goes Here
    <span>Subtitle Goes Here</span>
      </div>
    </div>
  </button>
</div>

Upvotes: 1

Related Questions