Centering Text over Image

Question

Here's my summarized code

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

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.

Ideas?

Solution 1

Try the following css:

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

===Edit ===

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

There you go JsFiddle

Solution 2

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>

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

Comments

[Chase Westlye]

Unfortunately it didn't have the effect you were probably thinking: d.pr/i/huk4

[Patsy Issa]

@ChaseWestlye hmmm 2 min let me tinker.

[Chase Westlye]

I think you nailed it... Text is centered but the background image no longer appears: CSS: d.pr/i/7hMZ HTML: d.pr/i/dzeK Render: d.pr/i/bCBR Ideas?

[Patsy Issa]

The height is dynamic, line height 200px won't result in a centered text.