[解決済み] CSSで画像の上にテキストを配置する方法

質問

cssで画像上のテキストを中央に配置する方法を教えてください。

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

下のようなことをしたいのですが、なかなかうまくいきません、現在のcssはこちらです。

<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

<イグ

background-imageを使用すると、html2pdfから何も出力されません。

<style>
#image_container{
    width: 1000px;
    height: 700px;
    background-image:url('switch.png');
}
</style>
<a href="prints.php">Print</a>
<?php ob_start(); ?>
<div id="image_container"></div>
<?php 
$_SESSION['sess'] = ob_get_contents(); 
ob_flush();
?>

以下はprints.phpです。

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

どのように解決するのですか？

このようなものはどうでしょうか。 http://jsfiddle.net/EgLKV/3/

そのためには position:absolute と z-index で画像の上にテキストを配置します。

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>