0

我试图在图像中放置一些文本，但文本 div 并没有出现在图像的顶部，而是在图像的正下方隐藏且不可见。提前致谢！

这是 jsfiddle 的链接：http: //jsfiddle.net/XrXZj/1/

在我的 css 文件中有以下内容：

.spotlight {
     color:#FFFFFF;
     display:table;
     height:120px;
     margin-bottom:15px;
     margin-left:0px;
     overflow:hidden;
     padding:0 50px;
     position:relative;
     width:840px;
}

.spotlight .wrapper {
     position:absolute;
}

.spotlight .middle {
      display:table-cell;
      height:50px;
      vertical-align:middle;
 }

.spotlight .spotlight-copy {
     font-size:15px;
     line-height:25px;
     width:500px;
}

这是html文件的内容：

 <div class="spotlight">
 <img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>"                 border="0" />
 <div class="wrapper">
        <div class="middle">
            <div class="spotlight-copy">
                <spring:message code="content.location.title" />
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
  </div>
4

2 回答 2

1 
.spotlight .wrapper {
    position:absolute;
    top: 0;
}
于 2013-09-04T22:49:02.507 回答
0

我放了一个解决方案http://jsfiddle.net/NPh76/

HTML是：

<div class="wrapper">
    <div class="middle">
        <div class="spotlight">
        <img src="http://www.springsource.org/files/header/logo-spring-103x60.png"                 border="0" />
        <div class="spotlight-copy">
            message in spotlight copy
        </div>
    </div>
</div>
<div style="clear: both;"></div>

通知HTML：

  • <IMG>是.middle在同一水平.spotlight-copy

CSS是：

.spotlight {
 color:#FFFFFF;
 display:table;
 height:120px;
 margin-bottom:15px;
 margin-left:0px;
 overflow:hidden;
 padding:0 50px;
position:absolute;
 width:840px;
}

.spotlight .wrapper {
 position:absolute;
}

.spotlight .middle {
 display:table-cell;
 height:50px;
 vertical-align:middle;
}

.spotlight .spotlight-copy {
 position:absolute;
 top: 0px;
 font-size:15px;
 line-height:25px;
 width:500px;
 color:#FF0000;
}

通知关于CSS

  • position:absolute;在.spotlight-copy
  • top: 0px;职位
  • color:#FF0000;看东西；）
于 2013-09-04T22:53:39.620 回答