CODEWITHSUNDEEP
htmlcssvertical-alignment
J.D.
J.D.

Reputation: 99

Vertically Centering Links in inside Div

http://www.fccorp.us/index.php

The vertical column to the left is my site menu system. The column is a div with a height:100%, and the different details are div's laid over it.

The buttons are DIV's with blank buttons as backgrounds, with links on them. I have two different size buttons, the big one 60px tall and the small one 30px. Using CSS can I get the links to be centered vertically regardless of the height of the button's DIV?

I've looked here and used a few CSS sites & Android Apps. The site here suggests I can't, but I can't understand why the CSS group would not create a vertically centering function since it seems so needed.

Am I just missing something or am I really trying to get something that isn't available with CSS?

Upvotes: 0

Views: 112

Answers (3)

Axel
Axel

Reputation: 10772

Based off your site, you can use line-height to adjust the vertical positioning of the text.

Try applying this to your 30px tall links:

line-height: 30px;

And this for the 60px tall:

line-height: 60px;

Additionally, you should not be nesting <div> tags within <a> tags.

Upvotes: 2

user2019515
user2019515

Reputation: 4503

Use this:

.menubuttonthick{line-height:60px;}
.menubuttonthin{line-height:30px;}

That will center all of your links.

On another note, currently you have the following structure:

<a href="#">
  <div>text</div>
</a>

That is invalid HTML. I'm not a "HTML must be valid at all times" type of guy, but when you can fix it that easily, I think it wouldn't hurt making it valid. You should use the following:

<div>
  <a href="#">text</a>
</div>

Upvotes: 2

mgrahamjo
mgrahamjo

Reputation: 219

Add this to your CSS. It will work regardless of the height of your buttons:

.menubar a div {
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 0

Related Questions