centering text on circle button

Question

I want to create a button circle link with text inside it but I have problem centering the text inside the circle button. The line height is too large. Any suggestion to this problem?

Here's the code: https://jsfiddle.net/hma443rL/

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
  font-size: 35px;
  line-height: 2.3;
  vertical-align:middle;
  color: white;
  font-weight: bold;
  text-decoration: none
}

<a href="" class="btn btn-donate">
  Donate <span>Us</span>
</a>

I'm trying to create a button like this

score 15 · Accepted Answer · answered Sep 01 '16 at 18:03

15

Flexbox can do that:

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 149px;
  border-radius: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  color: white;
  font-weight: bold;
  text-decoration: none
}

<a href="" class="btn btn-donate">Donate <span>Here</span></a>

answered Sep 01 '16 at 18:03

Paulie_D

107,962
13
142
161

does IE and safari 7++ compatible with css flex sir? – antonscie Sep 01 '16 at 18:06

score 2 · Answer 2 · answered Sep 01 '16 at 18:09

Use inline-blocks to line them up vertically instead of using line-height like here.

I have moved the full text inside the span in the markup

snippet below:

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
  font-size: 35px;
  vertical-align: middle;
  color: white;
  font-weight: bold;
  text-decoration: none
}
a.btn.btn-donate span {
  display: inline-block;
  vertical-align: middle;
}
a.btn.btn-donate:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

<a href="" class="btn btn-donate"><span>Donate Us</span></a>

score 1 · Answer 3 · answered Sep 01 '16 at 18:04

If you add another element to your markup you can centre using a combination of relative positions and transform

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
  font-size: 35px;
  vertical-align: middle;
  color: white;
  font-weight: bold;
  text-decoration: none
}
.wrapper {
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<a href="" class="btn btn-donate">
  <span class="wrapper">Donate <span>Us</span></span>
</a>

score 0 · Answer 4 · answered Sep 01 '16 at 18:15

I'm usually partial to using table display properties, but I believe it would suit your requirements here just fine. It requires very minimal adjustments to style and markup.

.btn-donate span {
    vertical-align: middle;
    display: table-cell;
}

.btn-donate {
    background: #97c83e;
    text-align: center;
    width: 149px;
    height: 148px;
    border-radius: 100%;
    display: table;
    font-size: 35px;
    vertical-align: middle;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

<a href=""class="btn btn-donate"><span>Donate Us</span></a>

centering text on circle button

4 Answers4

Linked