[英]How to center absolutely positioned elements in css for a pdf
我正在嘗試將名稱（＃box2）和主題（＃box1）放在圖像頂部。
<?php require_once('seminar_config.php'); ?>
<a href="print.certificate.php">Print</a>
<body>
<?php
$participants = $db->get_results("SELECT participant FROM tbl_participants WHERE state=1");
$topics = $db->get_results("SELECT topic FROM tbl_topics");
if(!empty($participants)){
?>
<?php ob_start(); ?>
<div id="container">
<img src="certificate.jpg"/>
<?php foreach($topics as $a=>$b){ ?>
<?php foreach($participants as $k=>$v){ ?>
<img src="certificate.jpg"/>
<div id="box1" class="common"><?php echo $b->topic; ?></div>
<div id="box2" class="common"><?php echo $v->participant; ?></div>
<?php } ?>
<?php } ?>
</div>
<?php $_SESSION['certificates'] = ob_get_contents(); ?>
<?php ob_flush(); ?>
<?php } ?>
</body>
這是創建pdf的腳本：
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML('<style>
#box1{
margin-top: 350px;
}
#box2{
margin-top: 200px;
}
.common{
height: 20px;
left: 630px;
right: 630px;
text-align: center;
position: absolute;
left: 0;
top: 0;
font-size:20px;
}
</style>'.
$_SESSION['certificates']);
$html2pdf->Output('random.pdf');
?>
如果我不使用html2pdf生成pdf文件，則名稱和主題的中心位置沒有問題。 但是，如果我使用html2pdf，那么一切都將毀於一旦。 使用html2pdf時，請幫助我將CSS中的內容居中。
老問題了，但是我今天也遇到了類似的問題。 在嘗試html和css歷史中的每種方法以使某些內容居中之后，這就是我能夠解決的方法。 我使用了像JorisW這樣的表：
<table style='width:100%' align='center'>
<tr>
<td>
<img src="image.gif">
</td>
</tr>
</table>
大多數常見的HTML到PDF程序要么不了解CSS，要么不了解CSS。 如果您的HTML可以正常工作，但不能使用html2pdf很好地轉換為PDF，則可以給wkhtmltopdf試一下https://github.com/antialize/wkhtmltopdf
如果要居中.common，請嘗試以下操作：
.common{
position: absolute;
left: 50%;
top: 0;
font-size:20px;
width:600px;
margin-left:-300px;
}
嘗試使用表格和內聯CSS樣式
<table align="left" width="100%" style="page-break-after:always; margin-top:25px; margin-left:25px; font-family:tahoma; font-size:20px; ">
<tr><td>Your info</td></tr>
</table>
這是我用來將div定位在中心的內容。
假設您要使用id = test定位div
的CSS
#test {
width: 500px;
margin: 0 auto; //auto margin to left and right
}
Javascript根據多個絕對定位的子元素的高度調整容器的大小
[英]Javascript to resize container based on height of multiple absolutely positioned child elements
如何使數字在居中放置的CSS元素上左右擴展？
[英]how do i make numbers expand left and right over a centrally positioned CSS element?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.