8

这是我总结的代码

HTML:

<div class="wrap">
      <div>
      <img src="Pictures/titlepic.jpg" width="1035" height="200">
      <h1 class="text_over_image">Welcome to my Sandbox</h1>
      </div>
</div>

CSS:

.wrap{
    width: 1060px;
    margin: auto;
    }
.text_over_image{
    position: absolute;
    top: 20px;
    }   

我已经尝试了left: 50%,,text-align:center任何数量的事情都没有运气。我不想做一个left: 50px(或任何需要的值),因为看不见的是文本的长度根据 Javascript 值而变化。所以标题可能很短,也可能很长,无论如何我都希望它居中。

想法?

4

3 回答 3

14

试试下面的css:

.text_over_image{
    position: absolute;
    top: 0;
    left:0;
    right:0;
    bottom:0;
 }  

===编辑===

.wrap {
    width: 1060px;
    height:auto;
    margin: auto;
    text-align:center;
    position:relative;
}
.text_over_image {
    position: absolute;
    margin: auto;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    color:#fff;
    height:100px;
}

你去JsFiddle

于 2013-09-11T07:23:29.883 回答
4

div.counter {
    position: relative;
    display: inline-block;
}
div.counter span {
    position: absolute;    
    text-align: center;
    height: 100%;
    width: 100%;
}
div.counter span:before {
   display: inline-block;
   vertical-align: middle;
   height: 100%;
   content: '';
}
<div class="counter">
    <span>TEXT</span>
    <img src="http://placehold.it/100x100"/>
</div>

于 2017-07-22T16:18:18.720 回答
3

HTML

<div class="wrap">
      <div>
       <h1 class="text_over_image">Welcome to my Sandbox</h1>
      </div>
</div>

CSS

.wrap
{
background-image:url(Pictures/titlepic.jpg);
width:1035px;
height:200px;
}
.text_over_image
{
text-align:center;
line-height:200px;
}
于 2013-09-11T07:29:57.563 回答