为什么我的图像没有对齐底部?

时间:2014-03-18 17:34:59

标签: html css

我觉得这是一个简单的修复,但我的代码不工作,我不知道为什么。

我想将'voip innovation:your premier wholesale voip carrier'图像与div的底部对齐。我把底部的绿色作为参考。

我试过

#cityBackground{
    position:relative;
    display:table-cell;
    vertical-align: bottom;
    background-image:url(../images/city_background_line_vi.jpg);
    background-repeat:repeat-x;
    height:500px;
    background-color:green;

}

    #cityBackground img{

        vertical-align:bottom;
        display:block;
        margin-left: auto;
        margin-right: auto;

    }

但它似乎没有用。

以下是该网站的链接

Link

这里有什么我想念的吗?

  • 编辑 -

抱歉,我没有解释清楚。我不希望背景图像向下移动。我希望徽标向下移动。

Picture for reference

4 个答案:

答案 0 :(得分:1)

CSS属性background-position控制图片所在的位置,而不是vertical-align。垂直对齐用于内容。背景图片不满足。

答案 1 :(得分:0)

您绝对可以将img元素相对于#cityBackground定位。

#cityBackground img {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -174px;
}

由于img宽度已修复,您可以使用left:50%margin-left:-174px水平居中。值-174pximg宽度的一半。

答案 2 :(得分:0)

这是你的代码检查这个

#cityBackground img {   
    position: absolute;
    bottom: 0px;
    left: 40%;
    right: 50%;
}

答案 3 :(得分:0)

可以尝试在图像中添加margin-top。

#cityBackground img {
display: block;
text-align: center;
width: 348px;
margin:436px auto 0 auto;
}