Cách định vị văn bản trên một hình ảnh trong css

Làm cách nào để căn giữa một văn bản trên một hình ảnh trong css?

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

Tôi muốn làm một cái gì đó giống như bên dưới nhưng tôi đang gặp khó khăn, đây là css hiện tại của tôi

<style>
.image {
   position: relative;
}

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

Khi tôi sử dụng ảnh nền tôi không nhận được bất kỳ đầu ra nào từ 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();
?>

Đây là print.php:

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

Làm thế nào về một cái gì đó như thế này: http://jsfiddle.net/EgLKV/3/

Nó được thực hiện bằng cách sử dụng position:absolutevà z-indexđể đặt văn bản trên hình ảnh.

#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>

Đây là một phương pháp khác để làm việc với các kích thước Responsive. Nó sẽ giữ văn bản của bạn tập trung và duy trì vị trí của nó trong cha mẹ của nó. Nếu bạn không muốn nó tập trung thì nó thậm chí còn dễ dàng hơn, chỉ cần làm việc với các absolutetham số. Hãy ghi nhớ container chính đang sử dụng display: inline-block. Có nhiều cách khác để làm điều này, tùy thuộc vào những gì bạn đang làm việc.

Dựa trên định tâm không xác định

Ví dụ làm việc tại đây

HTML

<div class="containerBox">
    <div class="text-box">
        <h4>Your Text is responsive and centered</h4>
    </div>
    <img class="img-responsive" src="http://placehold.it/900x100"/>
</div>

CSS

.containerBox {
    position: relative;
    display: inline-block;
}
.text-box {
    position: absolute;    
    height: 100%;
    text-align: center;    
    width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
h4 {
   display: inline-block;
   font-size: 20px; /*or whatever you want*/
   color: #FFF;   
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

Tại sao không đặt sample.pnglàm hình nền của lớp texthoặc h2css? Điều này sẽ có hiệu lực như bạn đã viết trên một hình ảnh.

Đối với một thiết kế đáp ứng, tốt nhất là sử dụng một container có bố cục và nội dung tương đối (được đặt trong container) có bố cục cố định như.

Kiểu CSS:

/*Centering element in a base container*/

.contianer-relative{ 
  position: relative;
 }

.content-center-text-absolute{ 
  position: absolute; 
  text-align: center;
  width: 100%;
  height: 0%;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 51;
}

Mã HTML:

<!-- Have used ionic classes -->
<div class="row">
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
    </div>
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
    </div>       
</div>

Đối với bố cục Lưới IONIC, các phần tử lưới cách đều nhau và các lớp được sử dụng trong HTML ở trên, vui lòng tham khảo - Lưới: Cột cách đều nhau . Hy vọng nó giúp được bạn... :)

như Harry Joy chỉ ra, hãy đặt hình ảnh làm nền của div và sau đó, nếu bạn chỉ có một dòng văn bản, bạn có thể đặt chiều cao của văn bản giống với chiều cao của div và điều này sẽ đặt văn bản của bạn vào trung tâm của div.

Nếu bạn có nhiều hơn một dòng, bạn sẽ muốn đặt màn hình thành ô bảng và căn chỉnh dọc thành giữa.

như năm 2017, điều này là phản ứng nhanh hơn và làm việc cho tôi. Điều này là để đặt văn bản bên trong so với hơn, giống như một huy hiệu. thay vì số 8, tôi có một biến để lấy dữ liệu từ cơ sở dữ liệu.

mã này bắt đầu với câu trả lời của Kailas ở trên

https://jsfiddle.net/jim54729/memmu2wb/3/

HTML của tôi

<div class="containerBox">
  <img class="img-responsive"    src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
  <div class='text-box'>
   <p class='dataNumber'> 8 </p>
  </div>
</div>

và css của tôi:

.containerBox {
  position: relative;
  display: inline-block;
}

.text-box {
  position: absolute;
  height: 30%;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 30px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: 120px;
  margin: auto;
  padding: auto;
}

.dataNumber {
  margin-top: auto;
}

Một cách nhỏ và ngắn để làm như vậy

HTML

<div class="image">
     <p>
        <h3>Heading 3</h3>
        <h5>Heading 5</h5>
     </p>
</div>

CSS

.image {
        position: relative;
        margin-bottom: 20px;
        width: 100%;
        height: 300px;
        color: white;
        background: url('../../Images/myImg.jpg') no-repeat;
        background-size: 250px 250px;
    }