2

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.

Tomkay
  • 5,120
  • 21
  • 60
  • 92
  • **Note**: `#div .partner div div div a img` could be simplified to `#div .partner div a img` or changed to `#div > .partner > div > div > div > a > img`. Otherwise based on your HTML I don't see a point to have multiple `div` selectors in your CSS. – Robert Koritnik Aug 04 '11 at 14:13
  • this seems all wrong.. i dont see a div with id "div" that you are selecting in css :) – Gatekeeper Aug 04 '11 at 14:20
  • Are those dimensions static that we see in your CSS? Are image dimensions also static so you know how big it is? – Robert Koritnik Aug 04 '11 at 15:02
  • @Robert Koritnik agree, and `#div > .partner > div > div > div > a > img` is faster than `#div .partner div a img`. –  Aug 04 '11 at 18:52

3 Answers3

3

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.

NGLN
  • 43,011
  • 8
  • 105
  • 200
  • What if those dimensions are not static? You wouldn't be able to set `line-height` as you did... – Robert Koritnik Aug 04 '11 at 15:03
  • +1 for adding the last sentance. Solution itself is more or less equivalent ot the first one. One element is still assumed static. **But** I wonder how you'd solve the problem with an additional `SPAN` element and without Javascript as you suggested... – Robert Koritnik Aug 04 '11 at 18:18
  • @Robert Hmmm, I thought [this trick](http://stackoverflow.com/questions/6084305/position-badge-over-corner-of-image-automatically/6086386#6086386) with `line-height: 0` would work, but I was mistaken. Strange though. – NGLN Aug 04 '11 at 19:50
  • That *trick* was used to position the badge on the image. Image container in that particular case is still statically dimensioned... but it still seems a nice trick I obviously didn't put enough time to understand, because I honestly don't get the trick. – Robert Koritnik Aug 04 '11 at 20:02
  • @Robert I used _the trick_ also [in this answer](http://stackoverflow.com/questions/6180034/problem-vertically-aligning-text-of-an-element-that-spans-two-lines/6245662#6245662). To be clear: I supposed [this fiddle](http://jsfiddle.net/V5kNb/2/) would work, but it doesn't. – NGLN Aug 04 '11 at 20:10
2

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.

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
1

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.

Elena
  • 266
  • 3
  • 12