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

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

添加的 “垂直对齐：顶部;”和“line-height：78px;”没有做到这一点。

我忘了/不做什么？

来源

2013-08-21 Sarah Weinberger

你不需要在divPortfolioImageCol1显示块，div的自然显示块，除非是某个改变 – Huangism

什么是'flush'？ – putvande

我的意思是顶部的图像应该垂直对齐顶部，留下一个衣衫褴褛的底部。现在，图像对齐齐平的底部，留下一个干净的底部和一个衣衫褴褛的上衣。我想要反过来。 –

我想你想要像下面这样：

的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-21 19:02:14

我在真实页面上测试了解决方案并且代码正常工作。答案似乎是必需的“.divPortfolioImageCol1 img {vertical-align：top;}”。只需在.divPortfolioImageCol1 {}内放置“vertical-align：top”并没有什么用。有趣。我以为风格流下了。我猜他们没有。 –

嗨莎拉，这是一个很好的观点。请参阅我对垂直对齐属性的评论。 –

嗨马克，我读了你的评论，而且这个事实根本不明显。当我学习CSS时，我被教会了从父容器中欺骗的风格。我将不得不保留一个精神上的注意点，或者写下来，例如，垂直对齐的风格，打破规则。谢谢。 –

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

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

来源

2013-08-21 18:27:40

我已经实现了这个加法，正如你所看到的那样，那并没有成功。您可以使用本地浏览器自行测试，只需使用两个不同的垂直大小的图像即可。其中一个是78px，另一个是38px。如果一切正常，根据需要，图像在顶部与衣衫褴褛的底部对齐。 –

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

回答

相关问题