在图像上居中文字

问题描述：

这是我的摘要代码

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;
    }

我尝试了向左：50％， text-align：center ，运气不佳。我不想做 left：50px （或任何需要的值），因为看不见的是文本的长度根据Javascript值而变化。所以标题可能是短标题，也可能是长标题，无论如何我都希望它居中。

I've tried left: 50%, text-align:center, any number of things with no great luck. I didn't want to do a left: 50px (or whatever the value needs to be) as whats unseen is that the length of the text changes depending on Javascript values. So the title could be short, or long and I want it to center no matter what.

想法？

答

尝试以下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

在图像上居中文字

相关推荐