0

This is my code:

#homeButtonText{
font-size: 25px;
text-align: center;
}

Here's how it looks:

How do I get the text on the inside to be right in the center.

I have tried,

vertical-align: middle;

with no success. Any help is appreciated!

Machavity
  • 30,841
  • 27
  • 92
  • 100
jazzy1331
  • 63
  • 9
  • Look, I've opened Goog and entered: `center text inside a div :stackoverflow` and there it is. Search before asking. Closing as duplicate. – Roko C. Buljan Feb 09 '15 at 00:36

4 Answers4

0

have you set height to your div? You can use line-height Check this here: demo

Dzhambazov
  • 490
  • 2
  • 11
0

Solutions:

FIRST - QUICKEST:

set line-height:(button height) to the #homeButtonText

SECOND - RECOMMENDED

use padding, like this:

padding:10px 20px;

so the text will be in center and you will have full control

Stoykov
  • 1
  • 1
  • padding is by far the best solution. line-height in my experience is really inaccurate or even misinterpreted across browsers & devices. Though using padding on an inline element you might want to set it to `inline-block` first – Roko C. Buljan Feb 09 '15 at 00:35
0

You could use display: table-cell and vertical-align: middle

.button {
  background: #DDDDDD;
  width: 200px;
  height: 80px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
a {
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
}
<div class="button"><a href="#">Home</a>
</div>
Ramiz Wachtler
  • 5,623
  • 2
  • 28
  • 33
0

Have you tried positioning the text absolutely inside the div?

Something like:

top:50%;
left:50%;
Andrew Polidori
  • 63
  • 8