Question

我在页脚中有几个图像，每个图像旁边都有文字。文本总是在图像的下一个/底部，但我希望它是图像的下一个/顶部。就像在这个网站页脚：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;
}

Answer 1

使用萤火虫检查。您会看到其他页面的页脚设置与您的页脚完全不同。页脚高度为32px。

Answer 2

应该很简单：

.footer_cnt img{   
    margin: 0;
    padding: 0;
    height: 50px;
    display: inline; //the important part of this :)
}

Answer 3

使用

.footer_cnt img{ 
display: inline; 
}

Answer 4

请检查http://jsfiddle.net/94G7g/21/。使用line-height来对齐文本。也做了一点改变

Answer 5

进行以下更改：

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

另外，请将您的HTML <image>标记更改为<img>。

JSFiddle

将文本放在下一个/顶部到图像

5 个答案: