CODEWITHSUNDEEP
csstwitter-bootstrap
Tom O'Brien
Tom O'Brien

Reputation: 1831

How to Centre Glyphicon Vertically In Bootstrap Button

I am trying to place a glyphicon inside a bootstrap button. When I reduce the width/height of the button, the glyphicon no longer stays centered, vertically or horizontally. I can fix the horizontal position using position:relative.

However, I can't figure out how to fix it's vertical positioning.

Here is what the HTML looks like:

<button type="button" class="btn btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>

And here is what the CSS looks like:

.add-podcast-btn {
  font-size: 11px;
  text-align: center;
  width: 25px;
  height: 25px;
}

.glyphicon-center {
  position: relative;
  right: 4.5px;
}

I've included a PLNKR to show whats going on: http://plnkr.co/edit/5TAvWpZ3l9ntKpJCJZAA

Upvotes: 2

Views: 3259

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122077

Try this http://plnkr.co/edit/06lYcyqGYn5IC6U9N3uR?p=preview

.add-podcast-btn {
  margin-top: 100px;
  margin-left: 100px;
  font-size: 11px;
  text-align: center;
  width: 25px;
  height: 25px;
  position: relative;
}

.glyphicon-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Upvotes: 1

abl
abl

Reputation: 5968

If you use the predefined bootstrap button sizes you won't need to manually adjust the height of the buttons.

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

<button type="button" class="btn btn-lg btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>
<button type="button" class="btn btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>
<button type="button" class="btn btn-sm btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>
<button type="button" class="btn btn-xs btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span>
</button>

<br/>

<button type="button" class="btn btn-lg btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast
</button>

<br/>

<button type="button" class="btn btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast
</button>

<br/>

<button type="button" class="btn btn-sm btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast
</button>

<br/>

<button type="button" class="btn btn-xs btn-default add-podcast-btn">
  <span class="glyphicon glyphicon-plus glyphicon-center"></span> Add podcast
</button>

Upvotes: 1

luk492
luk492

Reputation: 368

Try just this line.

<button class="btn btn-default glyphicon glyphicon-plus"></button>

Upvotes: 0

Related Questions