CODEWITHSUNDEEP
htmlcssimagetext
Chase Westlye
Chase Westlye

Reputation: 383

Centering Text over Image

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

Answers (3)

sbrbot
sbrbot

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

Patsy Issa
Patsy Issa

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

Sasidharan
Sasidharan

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

Related Questions