Reputation: 383
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?
Upvotes: 8
Views: 38348
Reputation: 6479
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>
Upvotes: 4
Reputation: 11303
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
Upvotes: 13
Reputation: 3750
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;
}
Upvotes: 3