2

我有一个div标签，其中包含图像。假设不同的垂直大小的图像，默认值似乎将图像对齐底部。如何更改代码，以使图像对齐顶部？

这是完整的 HTML 代码。

CSS

    #page {
        position: relative;
        padding: 0px 0px 0px 0px;
        float: left;
        border: none;
    }
    .divPortfolioImageRowFirst
    {
        display: table-row;
    }
    .divPortfolioImageCol1 {
        vertical-align: top;
    }

HTML

    <div id="page">
        <div>
            <div id="divProductLogos">
                <div class='divPortfolioImageRowFirst'>
                    <div class='divPortfolioImageCol1' style='line-height: 78px' id="divProductLogos_1">
                        <img style='margin-left: 0px;' src="./images/portfolio/ProductLogos_1.png"/>
                        <img style='margin-left: 15px;' src="./images/portfolio/ProductLogos_2.png"/>
                    </div>
                </div>
            </div>
        </div>
    </div>

添加“垂直对齐：顶部；” 和“行高：78px；” 没有成功。

我忘记/没有做什么？

4

2 回答 2

1

首先，valign不是一个有效的属性，你应该使用vertical-align: top;

您还需要设置line-height为最高图像的高度。

于 2013-08-21T18:27:40.323 回答
1

我认为您想要以下内容：

的HTML：

<div id="divProductLogos">
    <div class='divPortfolioImageRowFirst'>
        <div class='divPortfolioImageCol1'>
            <img src="http://placekitten.com/150/200" />
            <img src="http://placekitten.com/150/250" />
        </div>
    </div>
</div>

和CSS：

.divPortfolioImageRowFirst {
    border: 2px dotted gray;
    padding: 10px;
}
.divPortfolioImageCol1 {
    border: 1px dotted gray;
}
.divPortfolioImageCol1 img {
    vertical-align: top;
}

最初，你有太多的浮动影响布局，这导致了一些问题。

您还可以根据其他设计考虑使用 CSS 表格单元格。

演示小提琴：http: //jsfiddle.net/audetwebdesign/9fhCS/

关于 Vertical-align 属性

该vertical-align属性不被继承，所以它被应用到需要调整的内联元素上。在父容器上指定vertical-align不会影响子元素。

参考：http ://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

于 2013-08-21T19:02:14.173 回答