Comment positionner du texte sur une image en CSS

Comment centrer un texte sur une image en CSS?

Some text

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

  .image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; margin: 0 auto; width: 300px; height: 50px; }  

entrer la description de l'image ici

Lorsque j’utilise background-image, je n’obtiens aucune sortie de html2pdf:

  #image_container{ width: 1000px; height: 700px; background-image:url('switch.png'); }  Print  

Voici https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css/prints.php:

  writeHTML($_SESSION['sess']); $html2pdf->Output('random.pdf'); ?> 

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

Cela se fait en utilisant position:absolute et 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; } 
 

Hello World!

Ceci est une autre méthode pour travailler avec les tailles Responsive. Cela gardera votre texte centré et maintiendra sa position dans son parent. Si vous ne voulez pas qu’il soit centré, alors c’est encore plus simple, il suffit de travailler avec les parameters absolute . Gardez à l’esprit que le conteneur principal utilise display: inline-block . Il y a beaucoup d’autres façons de le faire, en fonction de votre travail.

Basé sur le centrage de l’inconnu

Exemple de codepen de travail ici

HTML

 

Your Text is responsive and centered

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.png comme image de fond de la classe text ou h2 css? Cela donnera l’effet que vous avez écrit sur une image.

Pour un design réactif, il est bon d’utiliser un conteneur ayant une disposition et un contenu relatifs (placés 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:

  
ENGINEERING MANUAL

ENGINEERING
MANUALS

CONTRACTOR DIRECTORY

CONTRACTOR
DIRECTORY

Pour la disposition de la grid IONIC, les éléments de grid régulièrement espacés et les classes utilisées dans le code HTML ci-dessus, reportez-vous à – Grille: colonnes régulièrement espacées. J’espère que ça vous aide … 🙂

Comme le souligne Harry Joy, définissez l’image comme arrière-plan de la partition 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 du div. centre de la div.

Si vous avez plus d’une ligne, vous voudrez définir l’affichage sur une table et l’alignement vertical sur le milieu.

à partir de 2017, c’est plus réactif et a travaillé pour moi. C’est pour mettre du texte à l’intérieur ou à l’extérieur, comme un badge. au lieu du chiffre 8, j’avais une variable pour extraire des données d’une firebase database.

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

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

Mon HTML

 

8

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 chemin pour faire la même chose

HTML

 

Heading 3

Heading 5

CSS

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