HTML 对齐图像

Question

我已经创建了以下 html

http://www.bilder-upload.eu/show.php?file=714cc2-1469113881.jpg

如何更改图像将放置在白色区域底部的对齐方式？我用 align-Vertical 尝试了一切，但这不起作用。我不想改变它们适合的图像的宽度。

This should be the result

但我用 'margin-top:-4em' 管理它，我认为这不是正确的方法，因为如果窗口变小，possition 将会改变

这是我的代码

HTML

<nav class="nav">
  <ul>
    <li><a href="index.html" class="active"><img src="images/home.png" /></a></li>
    <li><a href="index.html" class="active"><img src="images/auto.png" /></a></li>
    <li><a href="index.html" class="active"><img src="images/bus.png" /></a></li>
    <li><a href="index.html" class="active"><img src="images/bahn.png" /></a></li>
  </ul>
</nav>

CSS

/* Navigation */
nav
{
    display:block;
    height:2.5em;
    background:#ffffff;
    text-align:center;
}

nav ul
{
    display:block;   
}

nav ul li
{
    display:inline;   
    margin:0em 0.188em 0em 0.188em;    
     
}

nav ul li a
{
    color:#454040;
    font-size:1.125em;
    line-height:2.5em;  
    padding:0.563em 0.938em 0.375em 0.983em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}

nav ul li a img
{        
    width:4%;   
    height:auto;
}

感谢帮助 问候 内乔克斯

Answer 1

如果我没理解错的话，如果你想改变图像的位置使其更靠近图像中的白色区域(而不扭曲图像)，那么你将需要一个照片编辑器(即 photoshop)来编辑图像。 CSS 无法进行此更改。

此外，您似乎正在处理 2 个单独的图像。 1.你的代码中的图片是714cc2-1469113881.jpg，宽928px，高139px。您示例中的图像是 UyHCB.jpg，宽度为 546px，高度为 172px。为什么有 2 张不同的图像？ 2. 为什么图像在 input 标签内，而在 form 标签外？