Comment positionner du texte sur une image en css ?

Question

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 aucun résultat 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');
?>

Answer 1

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

Cela se fait en utilisant position:absolute y z-index pour 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>

Answer 2

Il s'agit d'une autre méthode pour travailler avec des tailles réactives. Elle permet de centrer votre texte et de maintenir sa position au sein de son parent. Si vous ne voulez pas qu'il soit centré, c'est encore plus facile, il suffit de travailler avec l'attribut absolute paramètres. Gardez à l'esprit que le conteneur principal utilise display: inline-block . Il existe de nombreuses autres façons de procéder, en fonction de ce sur quoi vous travaillez.

Sur la base de Centrer l'inconnu

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

Answer 3

Pourquoi ne pas mettre sample.png comme image de fond de text o h2 Classe css ? Cela donnera l'effet que vous avez écrit sur une image.

Answer 4

Pour un design réactif, il est bon d'utiliser un conteneur ayant une mise en page relative et un contenu (placé dans le conteneur) ayant une mise en page fixe.

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 de la grille IONIC, les éléments de la grille à espacement régulier et les classes utilisées dans le HTML ci-dessus, veuillez vous référer à - Grille : Colonnes uniformément espacées . J'espère que cela vous aidera... :)

Answer 5

Comme l'indique Harry Joy, définissez l'image comme l'arrière-plan de la division et, si vous n'avez qu'une seule ligne de texte, vous pouvez définir la hauteur de ligne du texte comme étant la hauteur de la division, ce qui placera votre texte au centre de la division.

Si vous avez plus d'une ligne, vous devez définir l'affichage comme étant une cellule de tableau et l'alignement vertical comme étant central.