Align HTML Text in a Div through CSS

Question

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!

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

score 0 · Accepted Answer · answered Feb 09 '15 at 00:26

0

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

answered Feb 09 '15 at 00:26

Dzhambazov

490
2
11

score 0 · Answer 2 · answered Feb 09 '15 at 00:27

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

answered Feb 09 '15 at 00:27

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

score 0 · Answer 3 · answered Feb 09 '15 at 00:29

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>

score 0 · Answer 4 · answered Feb 09 '15 at 00:30

0

Have you tried positioning the text absolutely inside the div?

Something like:

top:50%;
left:50%;

answered Feb 09 '15 at 00:30

Andrew Polidori

63
8

`Top` should be `top`, `Left` should be `left` , your'e missing `;` , and position absolute with those parameters will really not lead to the needed result. – Roko C. Buljan Feb 09 '15 at 00:32
ah okay, I was just riffing off the top of my head. What's the main issue with it? Assuming proper syntax? – Andrew Polidori Feb 09 '15 at 00:43
you cannot position *text* absolutely, just an element containing text. IF that's the case, create on your own a demo with your exact code and you'll see the issue. – Roko C. Buljan Feb 09 '15 at 00:49
Ah I see. I was just assuming a
or something. Thanks.
– Andrew Polidori Feb 09 '15 at 00:53
http://jsbin.com/qixupi/1/edit – Roko C. Buljan Feb 09 '15 at 01:06
1

I dunno what I'm smoking then haha. Though if I had some I'd still share :) – Andrew Polidori Feb 09 '15 at 01:20

Align HTML Text in a Div through CSS

4 Answers4