Question

我创建了以下的HTML

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

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

This should be the result

但是我把它与＃margin; top-top：-4em＆＃39;而且我认为这不是正确的方法，因为如果窗口变小，则会改变位置

这是我的代码

HTML

＆＃13;

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

＆＃13;

CSS

＆＃13;

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

＆＃13;

感谢您的帮助问候 Nejox

Answer 1

如果我理解正确，如果你想更改图像的位置更接近图像中的白色区域（不扭曲图像），那么你需要一个照片编辑器（即photoshop）来编辑图像。 CSS无法进行此更改。

此外，您似乎正在处理2张单独的图像。 1.代码中的图像为714cc2-1469113881.jpg，宽度为928px，高度为139px。您的示例中的图像是UyHCB.jpg，宽度为546px，高度为172px。为什么2张不同的图片 2.为什么输入标签中的图像位于表单标签之外？

Answer 2

您是否尝试过 inline-bloc k和 vertical-align：bottom ？

Answer 3

导航的高度必须大于图片。我随身携带手机。也许我可以稍后查看你的代码。

Answer 4

好的我通过设置图像的最大宽度来管理它并使用margin-top得到正确的位置

nav ul li a img
{  
    margin-top:-4.5em;
    width:4%;   
    height:auto;
    max-width:80px;
}

HTML对齐图像

4 个答案: