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