CODEWITHSUNDEEP
htmlcssvertical-alignment
user1152440
user1152440

Reputation: 905

Vertical Align Not Taking Effect

I am not sure why my "Add to Favorites" text won't align to the middle of the blue element, which is what I would like it to do. I've added vertical-align:middle to both classes below. If I remove the fav.png picture inside the blue field the text just goes to the top of the red dotted box.

Fav Box

CSS:

.favouriteLink
{
    border: 1px solid black;
    margin:3%;
    background-image: url('images/blueBanner.png');
    border-radius: 15px;
    height:40px;
    vertical-align:middle;
    text-align:center;

}

.favouriteLink a
{
    border: 1px dotted red;
    display:block;
    text-decoration:none;
    text-weight:bold;
    color:white;
    vertical-align:middle;
}

HTML:

<div class="favouriteLink">
    <a href="javascript:alert('test')"><img class="navImg" src="images/fav.png" />Add to Favourites</a>
</div>

EDIT:

Working fiddle: http://jsfiddle.net/YcMgh/2/

For some reason setting the height as suggested to 40px would centre the text but only if the image was smaller which is why I didn't notice it originally. I'm a bit confused on this because how would changing the image position change the text? Is the text field not separate from the image?

For example... Since my img is 32px by 32px this occurs- http://jsfiddle.net/YcMgh/3/

However if I change to 25px: http://jsfiddle.net/YcMgh/4/

Upvotes: 0

Views: 1531

Answers (6)

Eric A. Meyer
Eric A. Meyer

Reputation: 930

Two things:

  1. Add line-height: 40px to your .favouriteLink a rule. I picked that since it matches the height you set for the button.

  2. Add the rule .favouriteLink img {vertical-align: middle;}. If that’s not quite where you want it, use length-based offsets like vertical-align: -9px or some such.

Upvotes: 2

Hux
Hux

Reputation: 3122

I think this whole solution can be simplfied. Rather than including the image url for a button in your mark-up potentially a couple of times, I think it would be easier to move it into a CSS class. This way you can define a base CSS class that is a button without an image, and another class to add in the correct background image.

Other benefits of this approach is that background-images have alignment properties so that the image can easily be vertically aligned without much hassle.

An example of this mark-up would be as follows:

HTML:

<a href="javascript:alert('test');" class="link favourite-link">
    <span>Add to Favourites</span>
</a>

CSS:

.link
{
    margin:5px;
    border:1px dashed #333;
    background:#ededed;
    border-radius: 15px;
    height:40px;
    vertical-align:middle;
    text-align:center;
    display:inline-block;
    line-height:40px;
    padding:0 7px;
    width:250px;
}
.favourite-link span {
    background:url("image/goes/here.png") no-repeat left center;
    display:inline-block;
    padding-left:20px /* equal to icon width */;
}

Note: the extra span can be removed if you do not require the text to be central and the icon next to the text.

Upvotes: 1

Christoph
Christoph

Reputation: 51211

Forget all the other answers. You just need to align your image properly. Its alignment to the baseline pushes the text down. Align it top or text-top to fix this.

see Example-Fiddle here

You dont need vertical-align on the a or its container. You may need to adjust the values according to your imageheight/textheight.

Upvotes: 1

ThePrimeagen
ThePrimeagen

Reputation: 4582

I simply prefer using the line-height: 40px; // Your height of your div I like that because its easier to control how large an item's height is!

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

Try adding this rule to .favouriteLink:

display:table-cell;

This will trigger your browser to align vertically in the manner you're probably expecting.

Upvotes: 0

kitti
kitti

Reputation: 14814

Try adding this to your CSS:

.favoriteLink * {
    vertical-align: middle;
}

To get your desired results, you need to set vertical-align on all elements inside your div.

Upvotes: -1

Related Questions