CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6511

Align text centrally vertically in button

I'd like to align both sets of text in the buttons centrally vertically. How do I do this?

My Demo: http://jsfiddle.net/fc6317ne/

a.block {
  color: #ffffff;
  background: #F0F0F0;
  font-size: 0.8rem;
  height: 60px;
  text-align: center;
  text-decoration: none;
  width: 30%;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
  vertical-align: middle;
}
<a href="" class="block active">Button</a>

<a href="" class="block active">Button That Has More Words</a>

Upvotes: 2

Views: 84

Answers (3)

Naeem Shaikh
Naeem Shaikh

Reputation: 15725

You can use display:table property on anchor and then wrap the text inside a span, and display it as table-cell, with vertically aligning the span in middle.

You wont need to adjust line-height or padding for this. Fiddle

a.block {
  color: #red;
  background: #F0F0F0;
  font-size: 0.8rem;
  height: 60px;
  text-align: center;
  text-decoration: none;
  width: 30%;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  display: table;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<a href="" class="block active"><span>Button</span></a>

<a href="" class="block active"><span>Button That Has More Words</span></a>

Upvotes: 3

G.L.P
G.L.P

Reputation: 7217

Try like this: Demo

CSS:

 a.block {
  color: #000;
  background: #F0F0F0;
  font-size: 0.8rem;
  height: 60px;
  line-height:60px;
  text-align: center;
  text-decoration: none;
  width: 30%;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  display: block;
  vertical-align: middle;
}
span{
    line-height:22px !important;
    display: inline-block;
    vertical-align: middle;
}

HTML:

<a href="" class="block active"><span>Button</span></a>

<a href="" class="block active"><span>Button That Has More Words</span></a>

Upvotes: 0

Magicprog.fr
Magicprog.fr

Reputation: 4100

Just add line-height: 60px; to your a.block css

Fiddle: http://jsfiddle.net/ghorg12110/fc6317ne/1/

Upvotes: 0

Related Questions