在图像上居中文字 [英] Centering Text over Image

问题描述

这是我的摘要代码

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

这篇关于在图像上居中文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！