0

フッターにいくつかの画像があり、それぞれの横にテキストがあります。テキストは常に画像の横/下にありますが、画像の横/上にあることを望みます。このウェブサイトのフッターと同じように: http://robin-akademie.de/#inhalt

どうすればこれを簡単に行うことができますか? テキストを span/p タグに入れてから、span/p で margin-bottom を使用しようとしましたが、うまくいきません。

これは、画像の隣/下にテキストを生成する私のコードです。Text1 については、下から 5px のスパンとマージンで試しました。しかし、テキストは反応しません。ただし、テキストは margin-left に反応します。

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

firebug を使用して検査します。他のページでは、フッターの 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 に答える