CODEWITHSUNDEEP
cssimagevertical-alignment
Tomkay
Tomkay

Reputation: 5160

middled vertical alignement of an "img" in "a"

The HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head></head>
    <body>

        <div class="lt-0 partner">
            <div class="csc-textpic csc-textpic-center csc-textpic-above" >
                <div class="csc-textpic-imagewrap csc-textpic-single-image">
                    <a>
                        <img href="bilder/bild.jpg" />
                    </a>
                </div>
            </div>
        </div>

    </body>
</html>

The CSS Code: 

#div .partner div div{
    height: 140px;
    width: 280px;
    border: 1px solid #000;
}

#div .partner div div a{
    height: 100%;
    width: 100%;
    display: block;
    vertical-align: middle;
}

#div .partner div div div a img{
    display: inline;
}

My problem is, that the image must be centered but the link must be at full size. Its part of a Typo 3 Website.

Thanks for help in advance.

Upvotes: 2

Views: 791

Answers (3)

Elena
Elena

Reputation: 366

You can get horizontal align for this image using for tag "a":

text-align: center;

But for to get vertical align unfortunately you need to set margin-top for this image with hands using known height of parent div (or, with the same result, padding-top for "a" tag). You can use some jquery plugins for it (just search something like "jquery vertical align plugin" in google, there are many plugins for it) or write your own script.

Upvotes: 1

Robert Koritnik
Robert Koritnik

Reputation: 105059

First: few errors in your code

  1. It seems that you don't have an element with an ID="div" yet you're having it in all CSS selectors as the first element.

  2. Your last CSS selector that should style your IMG element is not met since you have one DIV too many in it.

  3. IMG element doesn't define href attribute but rather src

Second: Scriptless solution that supports dynamic dimensions

I've simplified your HTML and changed CSS a bit to make it all more obvious here on JSFiddle. All DIV and IMG elements have arbitrary sizes so styles don't rely on any of their dimensions.

Here's the code:

HTML

<!-- dimensions are set inline to make them of different size -->
<div class="container" style="height: 100px; width: 250px;">
    <a href="#">
        <img src="img111.png" />
    </a>
</div>
<div class="container" style="height: 120px; width: 150px;">
    <a href="#">
        <img src="img222.png" />
    </a>
</div>

CSS

.container {
    border: 2px solid #c00;
    display: table;
}
.container a {
    border: 2px solid #f90;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.container a img {
    border: 2px solid #9cf;
    background: #eee;
    padding: 2px;
}

Browser support

display types that I used are supported in most nowadays browsers except (of course) in IE where you'd need at least version 8. Anything older supposedly doesn't support them.

Upvotes: 2

NGLN
NGLN

Reputation: 43669

I think you mean something like this fiddle.

.partner div div {
    height: 140px;
    width: 280px;
    border: 1px solid #000;
}
.partner div div a {
    height: 100%;
    width: 100%;
    display: block;
    line-height: 140px;
    text-align: center;
}
.partner div div a img {
    vertical-align: middle;
}

And if the size of the container is not determined, then use this style fiddle:

.partner div div {
    height: 140px;
    width: 280px;
    border: 1px solid #000;
}
.partner div div a {
    height: 100%;
    width: 100%;
    display: block;
    text-align: center;
}
.partner div div a img {
    position: relative;
    top: 50%;
    margin-top: -25px; /* = half the image height */
}

If both container and image have undetermined height, then you need javascript. Shout if you want help with that.

Upvotes: 3

Related Questions