Comment positionner du texte sur une image en CSS

Comment centrer un texte sur une image en CSS?

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

Je veux faire quelque chose comme celui ci-dessous mais j'ai des difficultés, voici mon css actuel

<style>
.image {
   position: relative;
}

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

Lorsque j'utilise background-image, je n'obtiens aucune sortie de 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();
?>

Voici prints.php:

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

Que diriez-vous de quelque chose comme ça: http://jsfiddle.net/EgLKV/3/

C'est fait en utilisant position:absoluteet z-indexpour placer le texte sur l'image.

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

Il s'agit d'une autre méthode pour travailler avec des tailles réactives. Il gardera votre texte centré et conservera sa position dans son parent. Si vous ne voulez pas qu'il soit centré, c'est encore plus facile, travaillez simplement avec les absoluteparamètres. Gardez à l'esprit que le conteneur principal utilise display: inline-block. Il existe de nombreuses autres façons de le faire, en fonction de ce sur quoi vous travaillez.

Basé sur Centering the Unknown

Exemple de codepen de travail ici

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

Pourquoi ne pas définir sample.pngcomme image d'arrière-plan textou h2classe css? Cela donnera effet comme vous l'avez écrit sur une image.

Pour une conception réactive, il est bon d'utiliser un conteneur ayant une disposition relative et un contenu (placé dans un conteneur) ayant une disposition fixe comme.

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

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

Pour la mise en page IONIC Grid, les éléments de grille régulièrement espacés et les classes utilisées dans le code HTML ci-dessus, veuillez vous reporter à - Grille: colonnes à espacement régulier . J'espère que cela vous aidera ... :)

comme Harry Joy le souligne, définissez l'image comme arrière-plan du div et ensuite, si vous n'avez qu'une seule ligne de texte, vous pouvez définir la hauteur de ligne du texte pour qu'elle soit la même que la hauteur de div et cela placera votre texte dans le centre de la div.

Si vous avez plus d'une ligne, vous voudrez définir l'affichage sur cellule de tableau et alignement vertical sur le milieu.

à partir de 2017, c'est plus réactif et a fonctionné pour moi. C'est pour mettre du texte à l'intérieur ou par-dessus, comme un badge. au lieu du numéro 8, j'avais une variable pour extraire des données d'une base de données.

ce code a commencé avec la réponse de Kailas ci-dessus

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

Mon HTML

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

et mon css:

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

Un petit et court moyen de faire de même

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