CODEWITHSUNDEEP
htmlcsscentervertical-alignment
Joshua Bambrick
Joshua Bambrick

Reputation: 2699

Cannot Vertically Centre Image on Line

Here is a fiddle: http://jsfiddle.net/sAuhsoj/zSGLy/3/

I am trying to vertically centre the images in my links. The link has a fixed height property and the line-height is set to be equal to that. I have attempted to vertically centre the image by setting: vertical-align: middle; which is a technique I have used before but not necessarily for this exact purpose, however, the image seems too low. I cannot understand why this is happening. I removed all unrelated CSS properties which I though might have an effect but as you can see, the image will not move to the centre even if all unrelated properties are removed. You can see this problem even better if you set the height and line-height of the anchor element to 20px (the same height as the image) and the image sticks out off the bottom of the link (see http://jsfiddle.net/sAuhsoj/zSGLy/4/).

What can I do to vertically centre the image in this link?

Upvotes: 2

Views: 144

Answers (2)

VKen
VKen

Reputation: 5004

The answer provided by @udidu works for your case. However, you must note that the main reason why the image doesn't centre is due to the css property line-height that is applied to your <a> .link. Example from your code here http://jsfiddle.net/zSGLy/6/

Should you, by accident, have any inherited different css line-height property, the solution to set vertical-align:-5px will need to be re-checked and re-adjusted every time.

There are a few methods to address this issue:

1st Method

If you really need the image, you'll have to be a little bit hackish about it in this way by setting vertical positioning. This is one method I do not like to use if I don't have to, as you need to use another <span> element in the mix.

The line-height: 1; is important. The fiddle here http://jsfiddle.net/zSGLy/8/

HTML:

<a href="javascript:void(0)" class="link">
    <span><img src="http://energenius.co.uk/dash/img/settingsIcon.png" /></span>
</a>

​ CSS:

.link {
    display: inline-table;
    background-color: red;
    height: 30px;

    /* just to make the problem more obvious */
    width: 100px;
    text-align: center;
    line-height: 30px;
}

.link > span {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    line-height: 1;
}

2nd Method

On the concept of separating content from presentation (what stylesheet is for), a better way is to set your image as background-image.

Example here: http://jsfiddle.net/zSGLy/9/

CSS:

.link {
    display: inline-block;
    background-color: red;
    height: 30px;

    /* just to make the problem more obvious */
    width: 100px;
    text-align: center;

    /* bg image*/
    background-image: url(http://energenius.co.uk/dash/img/settingsIcon.png);
    background-repeat: no-repeat;
    background-position: center center;
}

HTML:

<a href="javascript:void(0)" class="link"></a>​

Hope it helps.

Upvotes: 1

udidu
udidu

Reputation: 8588

try 

vertical-align: -5px;

Here is the result:

http://jsfiddle.net/zSGLy/5/

Upvotes: 0

Related Questions