Центрирование Текст поверх изображения

Question

Вот мой суммированы код

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

Я попытался left: 50%, text-align:center, любое количество вещей, не большой удачи. Я не хотел делать left: 50px (или независимо от того, какое значение должно быть), поскольку невидимым является то, что длина текста изменяется в зависимости от значений Javascript. Таким образом, название может быть коротким или длинным, и я хочу, чтобы он сосредоточился независимо от того, что.

Идеи?

Answer 1

Попробуйте следующий 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

Answer 2

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

Answer 3

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>