往证书图片上填充文字内容

接口如下：

axios.post("/qrauth/search",{name:this.name,code:this.code,key:this.key,validateCode:this.validateCode}).then(function(res){}

需要实现：

在手机端实现正确输入证书编号和持证人姓名已经验证码，跳转到证书界面，证书显示的内容是该登录人所有。

 

 

遭遇到的问题：图片如何居中？文字如何出现在证书的正确位置？

 

 

问题解决的方式：

图片作为背景图片，然后将图片放到一个div中，图片大小固定，div大小和图片保持一致。将该div的位置absolute。

该div同时在另外一个div中，另一个div水平居中显示。两个div的大小一致。

这样就实现了图片的居中显示。

html代码如下： 

<div class="out">
      <span class="srcfont">
        <div class="inner">
         
          
      </span>
    </div> 

css代码如下：

.certificate-1 {
      width: 100%;
      height: 100%;
      background-color:#333333;
      text-align: center;//确保out div的父级该设置，out div会水平居中显示
      
    } 
    .out {
      margin: 215px auto 254.81px;
      width:320px; 
      height:225px;
    }
    .srcfont {
     font-family:Microsoft YaHei;
     /* font-family: KaiTi; */
     font-size: 5px;
    }
    .inner {
      background:url('/static/image/idenCertifi.jpg');
      background-repeat:no-repeat;
      position: absolute;
      width:320px; 
      height:225px;
    }

文字在证书页面需要绝对定位，具体的位置需要根据页面来进行调节，代码如下： 

<P style="left:52px; top:78px; position:absolute">{{ storeName }}</P>
<P style="left:131px; top:78px; position:absolute">{{ cname }}</P>
<p style="left:170px; top:78px; position:absolute"></p>
<p style="left:190px; top:78px; position:absolute"></p>
<p style="left:250px; top:78px; position:absolute">{{ productName }}</p>
<p style="left:198px; top:91px; position:absolute">{{ position }}</p>
<p style="left:230px; top:91px; position:absolute">{{ level }}</p>
<p style="left:210px; top:142px; position:absolute">{{ code }}</p>
<p style="left:210px; top:150px; position:absolute"></p>
<p style="left:227px; top:150px; position:absolute"></p>
<p style="left:240px; top:150px; position:absolute"></p>