Question

我有一个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>

添加“vertical-align：top;”和“行高：78px;”没有做到这一点。

我忘了/不做什么？

Answer 1

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

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

Answer 2

我认为您需要以下内容：

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不会影响子元素。

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

垂直对齐图像（顶部齐平），而不是底部齐平

2 个答案: