Hoe plaats ik tekst over een afbeelding in css

Hoe centreer ik een tekst over een afbeelding in css?

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

Ik wil zoiets als hieronder doen, maar ik heb problemen, hier is mijn huidige css

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

Als ik background-image gebruik krijg ik geen output van 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();
?>

Hier is prints.php:

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

Antwoord 1, autoriteit 100%

Wat dacht je van zoiets: http://jsfiddle.net/EgLKV/3/

Het is gedaan met behulp van position:absoluteen z-indexom de tekst over de afbeelding te plaatsen.

#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="https://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>

Antwoord 2, Autoriteit 17%

Dit is een andere methode om met responsieve maten te werken. Het houdt uw tekst gecentreerd en behoudt zijn positie binnen zijn ouder. Als je niet wilt dat het gecentreerd is, dan is het nog eenvoudiger, werk gewoon met de absoluteparameters. Houd er rekening mee dat de hoofdcontainer gebruikt display: inline-block. Er zijn veel andere manieren om dit te doen, afhankelijk van waar je aan werkt.

gebaseerd op centreren het onbekende

Werkcodepen Voorbeeld hier

html

<div class="containerBox">
    <div class="text-box">
        <h4>Your Text is responsive and centered</h4>
    </div>
    <img class="img-responsive" src="https://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;
}

Antwoord 3, autoriteit 4%

Waarom zou u sample.pngniet instellen als achtergrondafbeelding van textof h2CSS-klasse? Dit heeft effect zoals je over een afbeelding hebt geschreven.


Antwoord 4, autoriteit 3%

Voor een responsive design is het goed om een container te gebruiken met een relatieve lay-out en inhoud (geplaatst in container) met een vaste lay-out als.

CSS-stijlen:

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

HTML-code:

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

Voor IONIC-rasterlay-out, gelijkmatig verdeelde rasterelementen en de klassen die in bovenstaande HTML worden gebruikt, raadpleegt u – Raster: gelijkmatig verdeelde kolommen. Ik hoop dat het je helpt… 🙂


Antwoord 5, autoriteit 2%

zoals Harry Joy aangeeft, stel de afbeelding in als de achtergrond van de div en als je maar één regel tekst hebt, kun je de regelhoogte van de tekst zo instellen dat deze hetzelfde is als de hoogte van de div. tekst in het midden van de div.

Als je meer dan één regel hebt, moet je de weergave instellen op tabelcel en verticale uitlijning op het midden.


Antwoord 6

vanaf 2017 is dit responsiever en werkte het voor mij.
Dit is voor het plaatsen van tekst binnen versus over, zoals een badge.
in plaats van het getal 8 had ik een variabele om gegevens uit een database te halen.

deze code begon met Kailas‘s antwoord hierboven

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

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

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

Antwoord 7

Een kleine en korte manier om hetzelfde te doen

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

Other episodes