Come posizionare il testo su un'immagine in css

Question

Come si centra un testo su un'immagine in css?

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

voglio fare qualcosa di simile a quella qui sotto, ma sto avendo difficoltà, ecco il mio attuale css

<style> 
.image { 
    position: relative; 
} 

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

Quando uso background-image non ho ricevuto alcuna uscita da 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(); 
?> 

Ecco le stampe.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

Che ne dite di qualcosa di simile: http://jsfiddle.net/EgLKV/3/

suo fare utilizzando position:absolute e z-index per posizionare il testo sopra l'immagine.

#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

Perché non impostare sample.png immagine di sfondo di text o h2 classe CSS come? Questo darà effetto come hai scritto sopra un'immagine.

Answer 3

come sottolinea Harry Joy, imposta l'immagine come sfondo del div e quindi, se hai solo una riga di testo, puoi impostare l'altezza del testo in modo che sia uguale all'altezza div e questo si posizionerà il tuo testo al centro del div

Se si dispone di più di una linea, è necessario impostare il display come cella della tabella e allineamento verticale al centro.

Answer 4

Per un design reattivo è bene usare un contenitore avente una disposizione relativa e contenuto (collocato nel container) avente layout fisso come.

stili

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

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

Per il layout IONICO griglia, elementi di rete distribuiti uniformemente e le classi utilizzate nel precedente HTML, fare riferimento - Grid: Evenly Spaced Columns. Spero che ti aiuti ... :)

Answer 5

Questo è un altro metodo per lavorare con le dimensioni Responsive. Manterrà il tuo testo centrato e manterrà la sua posizione all'interno del suo genitore. Se non lo vuoi centrare, è ancora più semplice, basta lavorare con i parametri absolute. Tenere presente che il contenitore principale utilizza display: inline-block. Ci sono molti altri modi per farlo, a seconda di cosa stai lavorando.

base al largo di Centering the Unknown

Working codepen example here

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 6

come del 2017 questo è più reattivo e ha funzionato per me. Questo serve per inserire il testo all'interno o sopra, come un badge. invece del numero 8, avevo una variabile per estrarre i dati da un database.

questo codice è iniziato con Kailas 's risponde sopra

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

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

e il mio 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; 
} 

Answer 7

Un piccolo e breve modo di fare lo stesso

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