0

Vengo a ustedes nuevamente para que me puedan apoyar con un problema que tengo al momento de posicionar una imagen sobre un div en un formato PDF, lo que quiero es que la imagen (firma) esté sobre el nombre (que es un div) pero no puedo lograr hacerlo.

introducir la descripción de la imagen aquí

Aquí el código PHP que uso con la librería mpdf.

    <?php
$sql="SELECT c.nombre_cliente,m.nombre_medico,q.* from clientes c,resul_febriles q, medicos m where q.numero_factura='".$num_fac."' and q.id_cliente='".$id_cliente."' and c.id_cliente=q.id_cliente and q.fecha='". $fecha."' and m.id_medico='".$id_medico."'";
$resul=mysqli_query($con,$sql);
$rw_resul=mysqli_fetch_array($resul);

$fecha2=$rw_resul["fecha"];
$f = explode("/",$fecha2);
$dia=$f[0];
$mes=$f[1];
switch($mes)
{
        case '01':
                            $m="ENERO";
                            break;
        case '02':
                            $m="FEBRERO";
                            break;
        case '03':
                         $m="MARZO";
                         break;
         case '04':
                         $m="ABRIL";
                         break;
         case '05':
                 $m="MAYO";
                 break;
         case '06':
                         $m="JUNIO";
                         break;
         case '07':
                         $m="JULIO";
                         break;
         case '08':
                         $m="AGOSTO";
                         break;
         case '09':
                         $m="SEPTIEMBRE";
                         break;
         case '10':
                         $m="OCTUBRE";
                         break;
         case '11':
                         $m="NOVIEMBRE";
                         break;
         case '12':
                         $m="DICIEMRE";
                         break;

}
$an=$f[2];
if(empty($rw_resul["tifio"]))
    $tifio="----";
 else
     $tifio=$rw_resul["tifio"];
 if(empty($rw_resul["tifih"]))
     $tifih="----";
    else
        $tifih=$rw_resul["tifih"];
 if(empty($rw_resul["paraa"]))
     $paraa="----";
 else
     $paraa=$rw_resul["paraa"];
 if(empty($rw_resul["parab"]))
     $parab="----";
 else
     $parab=$rw_resul["parab"];
 if(empty($rw_resul["proteus"]))
     $prote="----";
 else
     $prote=$rw_resul["proteus"];
 if(empty($rw_resul["brucela"]))
     $bruce="----";
 else
     $bruce=$rw_resul["brucela"];

 $cadena.='

 <style>
 th, td {
     border: 0;
     width: 100px;
 }
 .nombre{
     width: 300px;
 }
 .fecha{
     width: 100px;
 }
 .datosgenerales{
     width: 550px;
 }
 .espacio{
     height:10px;
     cellspacing:10px;
 }
 .container {
  position: relative;
  text-align: center;
  color: black;
}

.centered {
  font-weight: bolder;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 </style>

 <table cellspacing="0" style="width: 100%;" cellpadding="0">
 <tr>
 <td style="width:35%;" ALIGN="LEFT" valign="top">
     <img src="./img/logo-photo.png" width="220" height="230" ><br>
 </td>
 <td style="width:50%; color: #444444;" align="right">
     <img width="100%" height="230" src="./img/cuadro_lab.png" alt="Logo"><br>
 </td>
 </tr></table><BR>
 <table cellspacing="0" cellpadding="0" width="100%">
 <tr>
         <td align="left" class="nombre"><B>Paciente: </B>'.strtoupper($rw_resul["nombre_cliente"]).'</td>
         <td align="right" class="fecha"><B>Fecha: </B>'.$dia.' - '.$m.' - '.$an.'</td>
 </tr>
 <tr>
         <td colspan="2" align="left"><BR><B>Doctor(a): </B>'.strtoupper($rw_resul["nombre_medico"]).'</td>
 </tr>
 <tr>
 <td colspan="2" align="center"><BR><B>DETERMINACION</B></td>
</tr>
 </table>
 <br><BR><BR>
 <p style="text-align:center;font-size:16px;" ><BR><B>INMUNOLOGIA REACCIONES FEBRILES</B> </p><BR>

 <table cellspacing="2" cellpadding="2" width="100%" >
 <thead>
     <tr class="datosgenerales">
             <td class="espacio"></td>
             <td class="espacio"></td>
             <td class="espacio"></td>
             <td align="left"><b><font face="Comic Sans MS,arial"  style="font-size:22px;">Resultado</font></b></td>
             <td class="espacio"></td>
        </tr>
    </thead>

    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>

    <tbody>
    <tr>
            <td class="espacio"></td>
            <td align="center" style="font-size:19px;"><font face="Comic Sans MS,arial">TIFICO “O”</font></td>
            <td class="espacio"></td>
            <td align="left" style="font-size:15px; font-weight:bold;"><font face="Comic Sans MS,arial">'.$tifio.'</font></td>
            <td class="espacio"></td>
    </tr>

    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>

    <tr>
            <td class="espacio"></td>
            <td align="center" style="font-size:19px;"><font face="Comic Sans MS,arial">TIFICO “H”</font></td>
            <td class="espacio"></td>
            <td align="left" style="font-size:15px; font-weight:bold;"><font face="Comic Sans MS,arial">'.$tifih.'</font></td>
            <td class="espacio"></td>
    </tr>

    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>

    <tr>
            <td class="espacio"></td>
            <td align="center" style="font-size:19px;"><font face="Comic Sans MS,arial">PARATIFICO “A”</font></td>
            <td class="espacio"></td>
            <td align="left" style="font-size:15px; font-weight:bold;"><font face="Comic Sans MS,arial">'.$paraa.'</font></td>
            <td class="espacio"></td>
    </tr>

    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>

    <tr>
            <td class="espacio"></td>
            <td align="center" style="font-size:19px;"><font face="Comic Sans MS,arial">PARATIFICO “B”</font></td>
            <td class="espacio"></td>
            <td align="left" style="font-size:15px; font-weight:bold;"><font face="Comic Sans MS,arial">'.$parab.'</font></td>
            <td class="espacio"></td>
    </tr>

    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>

    <tr>
            <td class="espacio"></td>
            <td align="center" style="font-size:19px;"><font face="Comic Sans MS,arial">PROTEUS OX 19</font></td>
            <td class="espacio"></td>
            <td align="left" style="font-size:15px; font-weight:bold;"><font face="Comic Sans MS,arial">'.$prote.'</font></td>
            <td class="espacio"></td>
    </tr>

    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>
    <tr class="espacio"></tr>

    <tr>
            <td class="espacio"></td>
            <td align="center" style="font-size:19px;"><font face="Comic Sans MS,arial">BRUCELLA ABORTUS</font></td>
            <td class="espacio"></td>
            <td align="left" style="font-size:15px; font-weight:bold;"><font face="Comic Sans MS,arial">'.$bruce.'</font></td>
            <td class="espacio"></td>
    </tr>
 </tbody>
</table>

 <BR><BR><BR><BR><BR><BR><BR><BR><BR>

 <div class="container">
  <img width="300px" height="110px" src="img/firma.png" alt="firma">
  <div class="centered">
    Antonio Martinez García <br>
    Químico Clínico
  </div>
</div>';
 $mpdf = new \Mpdf\Mpdf(['','format' =>'Letter-P','margin_footer'=>1,'orientation' =>'P','tempDir' => __DIR__ . '/tmp']);
 $mpdf->SetWatermarkImage('./img/logo1.png');
 $mpdf->showWatermarkImage = true;
 $mpdf->watermarkImageAlpha = 0.1;
 $mpdf->writeHTML($cadena);
 $mpdf->Image('./img/logo2.jpg', 120, 100, 200, 110, 'jpg', '', true, false);
?>

De igual forma mencionar que lo intenté con image() para posicionarlo sobre el nombre pero no me aparece nada.

$mpdf->Image('./img/logo2.jpg', 120, 100, 200, 110, 'jpg', '', true, false);

Excelente día a todos.

1 respuesta 1

1

Puedes usar contenedores y centrarlos de este modo:

Obvio, yo he usado una imagen de internet para el ejemplo.
Pero en cuanto a la solución, solo es que, dentro de un contenedor, pones la imagen, y junto a este un DIV.
A este div, le creamos la clase "centered" con esos detalles:

Otras recomendaciones: Trata de separar tu CSS del html, para que este sea mas simple de trabajar.

.container {
  position: relative;
  text-align: center;
  color: black;
}

.centered {
  font-weight: bolder;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="container">
  <img width="300px" height="110px" src="https://www.nicepng.com/png/detail/358-3588246_firma-ricardo-lagos-escobar-firma-en-png.png" alt="firma">
  <div class="centered">
    Antonio Martinez García <br>
    Químico Clínico
  </div>
</div>

3
  • Buenas tardes mi estimado, primero que nada gracias por tomarte tu tiempo en ayudarme y te comento que lo aplique a como me lo planteaste pero me sigue apareciendo la firma arriba y las letras abajo, te comento que lo estoy utilizando en un formato pdf con la libreria MPDF no se si sea por eso o que pero no me agarra asi. :( No se si haya alguna forma de hacerlo con la libreria MPDF en particular. Commented el 18 jun. 2021 a las 18:14
  • 1
    Mmm.. necesitaria que hagas un ejemplo mínimo verificable para poder reproducirlo por acá. Con tal de correrlo y obtener algo muy parecido a lo que tu obtienes.
    – Excorpion
    Commented el 18 jun. 2021 a las 18:19
  • Buenas tardes mi estimado, puse el código completo del archivo que uso el cual mando en PDF con ayuda de la libreria MPDF y ya implementado el código que me proporcionaste pero sigue apareciendo la firma arriba y las letras abajo, espero te sirva el codigo completo mi estimado y aprecio mucho tu ayuda. Commented el 18 jun. 2021 a las 18:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.