0

我在页脚中有几张图片，每张图片旁边都有文字。文本总是在图像的旁边/底部，但我希望它在图像的旁边/顶部。就像在这个网站页脚上一样：http ://robin-akademie.de/#inhalt

我怎么能轻松做到这一点？我尝试将文本放入 span/p 标记中，然后在 span/p 上使用 margin-bottom 但这不起作用。

这是我的代码，它可以生成图像旁边/底部的文本。对于Text1，我尝试了一个跨度并从底部开始跨度5px。但是文字没有反应。文本确实对左边距做出反应。

HTML：

<div class="footer">
    <div class="footer_cnt">
        <a href="#"><image src="<?= base_url('media/images/robinblack.jpg'); ?>" /><span>Text1</span></a>
        <a href="#"><image src="<?= base_url('media/images/glocke.jpg'); ?>" />Text2</a>
    </div>
</div>

CSS：

.footer_cnt img{   
    margin: 0;
    padding: 0;
    height: 50px;
}
.footer_cnt img a{
    color: white;
    float: left;   
}
.footer_cnt span{
    margin-bottom: 5px;
}
4

5 回答 5

1

使用萤火虫检查。您会看到其他页面的页脚 html 设置与您所拥有的完全不同。页脚也有一个很高的行高，32px。

于 2013-09-12T07:24:10.800 回答
1

应该很简单：

.footer_cnt img{   
    margin: 0;
    padding: 0;
    height: 50px;
    display: inline; //the important part of this :)
}
于 2013-09-12T07:24:31.000 回答
1

采用

.footer_cnt img{ 
display: inline; 
}
于 2013-09-12T07:26:02.627 回答
1

请检查此http://jsfiddle.net/94G7g/21/。用于line-height对齐文本。也做了些小改动

于 2013-09-12T07:46:53.923 回答
0

进行以下更改：

.footer_cnt span{
    display:inline-block;
    height:50px;
    vertical-align:middle;
}

此外，将您的 HTML<image>标记更改为<img>.

JSFiddle

于 2013-09-12T07:54:42.697 回答