CODEWITHSUNDEEP
htmlcssvertical-alignment
antonscie
antonscie

Reputation: 149

centering text on circle button

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

enter image description here

Upvotes: 10

Views: 9226

Answers (4)

UncaughtTypeError
UncaughtTypeError

Reputation: 8722

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>

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 2

Turnip
Turnip

Reputation: 36642

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>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115035

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>

Upvotes: 16

Related Questions