1

基本的に、私はコードを持っています：

<div id="footer">
    <a href="http://site.com/" target="_blank"><img src="image here.jpg"></a>
    <div style="position:absolute;left:5px;top:0px;">
        text here
    </div>
</div>

CSS:

#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center;color:#ECECEC; }

あるコンピューターではうまく機能しますが、別のコンピューターにロードすると、モニター/解像度に応じて、テキストがさらに左または右にオフセットされます。

中央に配置されているが、画像の上/下にホバリングされ、画像のすぐ右にオフセットされるように設定するにはどうすればよいですか?

編集

小画面:http://i.imgur.com/El2k8jG.png 大画面:http://i.imgur.com/0Nsskrz.png

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stuff here</title>
<style type="text/css">
#footer_container {border:0px solid #666; bottom:0; height:95px; left:0; position:fixed; width:100%; }
#footer { line-height:125px; margin:0 auto; width:500px;height:100%; text-align:center; }
#footer2 { line-height:165px; margin:0 auto; width:500px;height:100%; text-align:center;  }
</style>
</head>
<body>
<div id="container">
stuff here
</div>
<div id="footer_container">
    <div id="footer">
        <a href="http://site.com/" target="_blank"><img src="http://i.imgur.com/nx8pHGH.png"></a>
        <div style="position:absolute;left:500px;top:0px;">
            <i><font color=black>dasdasdasd dsad dasdasdas dsadsad <a href="http://site.com/" target="_blank">ssdasdasd</font></a>.</i>
        </div>
    </div>
    <div id="footer2">
        <div style="position:absolute;left:500px;top:0px;">
            <font color=black><b>dasdsa dasdasd dasdasdasd dasdsadsad .</b></font>
        </div>
    </div>
</div>
</body>
</html>
4

2 に答える 2

4

position: relative;テキストをフッターに対して絶対的に配置する場合は、フッターに設定する必要があります。

デモ

または、すべての配置と膨大な行の高さを削除できます

デモ

于 2013-11-02T01:12:25.053 に答える
2

代わりに画像を使用できますbackground-image。そうすれば、テキストの配置がはるかに簡単になります

HTML

<div id="footer">
    <a href="http://site.com/" target="_blank">
        <div>text here</div>
    </a>
</div>

CSS

#footer {
    line-height:125px;
    margin:0 auto;
    width:500px;
    height:100px;
    text-align:center;
    color:#ECECEC;
    background-image: url(http://i.imgur.com/nx8pHGH.png);
    background-repeat: no-repeat;
}

JSFiddleを参照してください

于 2013-11-02T01:58:07.210 に答える