“img”的中间垂直对齐在“a”中

发布于 2024-11-28 01:43:13 字数 1035 浏览 3 评论 0原文

HTML 代码：

<!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>

CSS 代码：

#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;
}

我的问题是，图像必须居中，但链接必须为全尺寸。它是 Typo 3 网站的一部分。

提前感谢您的帮助。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如痴如狂 2024-12-05 01:43:13

我认为你的意思是像这个小提琴。

.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;
}

而如果容器的大小未确定，则使用这种风格的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 */
}

如果容器和图像都高度未定，那么你需要javascript。如果您需要帮助，请大声喊出来。

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.

回复收藏 0 原文

网名女生简单气质 2024-12-05 01:43:13

第一：代码中存在一些错误

似乎您没有带有 ID="div" 的元素，但您却将它作为第一个元素出现在所有 CSS 选择器中。< /p>
您最后一个应该设置 IMG 元素样式的 CSS 选择器不符合要求，因为您的 DIV 元素太多了。
IMG 元素没有定义 href 属性，而是 src

第二：支持动态尺寸的无脚本解决方案

我简化了 HTML 并稍微更改了 CSS，使其在 JSFiddle。所有 DIV 和 IMG 元素都具有任意大小，因此样式不依赖于它们的任何尺寸。

代码如下：

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;
}

浏览器支持

我使用的 display 类型在大多数当今的浏览器中都受支持，除了（当然）在 IE 中，您至少需要版本 8。任何旧的据说不支持它们。

First: few errors in your code

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.
Your last CSS selector that should style your IMG element is not met since you have one DIV too many in it.
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.

回复收藏 0 原文

深者入戏 2024-12-05 01:43:13

您可以使用标签“a”获得该图像的水平对齐：

text-align: center;

但不幸的是，为了获得垂直对齐，您需要使用父 div 的已知高度（或者，具有相同的结果，padding-）设置该图像的 margin-top 。顶部为“a”标签）。你可以使用一些jquery插件（只需在google中搜索“jquery垂直对齐插件”之类的东西，有很多插件）或编写自己的脚本。

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.

回复收藏 0 原文

~没有更多了~