0

我正在尝试为 div id 提供一个以 850 像素为中心的反向链接的图像。在同一行上，我需要一个以文本为中心的 850px 行的 Div Id。任何帮助表示赞赏

这是我的 CSS

        #container3 > div {
    background-color:#000000;
    color:#FFFF00;
    font-size:18;
    font-family:arial;
    font-weight:Normal;
    width:850px;

}
    #BackLink {
    position:relative;
    background-image: url(../Images/Back-ButtonB.png);
    float:left;
    display:inline-block;
    width:80;
    height="18;

}
    #ObjectName {
    position:relative;
    text-align:center;

}

这是 div id

 <div id="container3">
<div id="BackLink"><a href=[Backlink]></a></div><div id="ObjectName">[ObjectName]</div>
</div>
4

2 回答 2

1

刚才把这个jsfiddle放在一起来说明绝对定位和文本对齐的使用。position:relative 设置在您的父 div (container3) 上。反向链接绝对位于左上角，并且 objectname 具有文本 align: center 以便文本在顶部居中。

http://jsfiddle.net/GXMbL/1/

<div id="container3">
  <div id="BackLink">
    <a href=[BackLink]>
      <!-- <img border="0" src="../Images/Back-ButtonB.gif" width="80" height="18"> -->
        Backlink        
    </a>
  </div>
  <div id="ObjectName">[ObjectName]</div>
</div>

和 css（这将需要根据您的目的进行改进，但它具有您需要的基础知识）

#container3{
    width:450px;
    height:300px;
    position:relative;
    background-color:#999999;
}
#BackLink{
    position:absolute;
    top:0;
    left:0;
}
#ObjectName{
    text-align:center;
}
于 2013-07-28T07:34:56.620 回答
1

下划线和链接问题是因为您没有<a>使用</a>.

html应该是：

<div id="container3">
  <div id="BackLink">
    <a href=[BackLink]>
      <img border="0" src="../Images/Back-ButtonB.gif" width="80" height="18">
    </a>
  </div>
  <div id="ObjectName">[ObjectName]</div>
</div>

这可能会或可能不会解决您的布局问题，但它绝对是关于下划线问题的答案

翅膀

于 2013-07-28T07:00:51.663 回答