So positionieren Sie Text über einem Bild in CSS

Wie zentriere ich einen Text über einem Bild in CSS?

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

Ich möchte so etwas wie das folgende machen, aber ich habe Schwierigkeiten, hier ist mein aktuelles CSS

<style>
.image {
   position: relative;
}

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

Wenn ich ein Hintergrundbild verwende, erhalte ich keine Ausgabe von 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 ist prints.php:

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

Wie wäre es mit so etwas: http://jsfiddle.net/EgLKV/3/

Dies geschieht durch Verwenden position:absoluteund z-indexPlatzieren des Texts über dem Bild.

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

Dies ist eine weitere Methode zum Arbeiten mit Responsive-Größen. Es wird Ihren Text zentriert halten und seine Position innerhalb des übergeordneten Textes beibehalten. Wenn Sie nicht möchten, dass es zentriert wird, ist es noch einfacher. Arbeiten Sie einfach mit den absoluteParametern. Denken Sie daran, dass der Hauptbehälter verwendet wird display: inline-block. Es gibt viele andere Möglichkeiten, dies zu tun, je nachdem, woran Sie arbeiten.

Basierend auf der Zentrierung des Unbekannten

Beispiel für einen funktionierenden Codepen hier

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

Warum nicht sample.pngals Hintergrundbild textoder h2CSS-Klasse festlegen ? Dies wird wirksam, wenn Sie über ein Bild geschrieben haben.

Für ein responsives Design ist es gut, einen Container mit einem relativen Layout und Inhalt (im Container platziert) mit festem Layout als zu verwenden.

CSS-Stile:

/*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 Quelltext:

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

Informationen zum IONIC-Rasterlayout, zu gleichmäßig verteilten Rasterelementen und zu den im obigen HTML verwendeten Klassen finden Sie unter - Raster: Gleichmäßig verteilte Spalten . Hoffe es hilft dir raus ... :)

Wie Harry Joy betont, stellen Sie das Bild als Hintergrund für das Div ein. Wenn Sie nur eine Textzeile haben, können Sie die Zeilenhöhe des Textes so einstellen, dass sie der Höhe des Div entspricht. Dadurch wird Ihr Text in das Feld eingefügt Zentrum der div.

Wenn Sie mehr als eine Zeile haben, möchten Sie die Anzeige auf Tabellenzelle und vertikale Ausrichtung auf Mitte einstellen.

Ab 2017 ist dies reaktionsschneller und hat für mich funktioniert. Dies dient dazu, Text wie ein Abzeichen in vs over zu setzen. Anstelle der Nummer 8 hatte ich eine Variable zum Abrufen von Daten aus einer Datenbank.

Dieser Code begann mit Kailas 'Antwort oben

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

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

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

Eine kleine und kurze Möglichkeit, dasselbe zu tun

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