如何在@page中垂直居中div并打印(DomPDF和Laravel)

hpcdzsge 于 2023-10-22 发布在其他

关注(0)|答案(3)|浏览(141)

您好！我目前正在使用Laravel 8的DomPDF库来使用原生CSS生成可打印的PDF（因为Bootstrap和其他导入无法很好地与此库一起工作）。
我发现很难格式化某些部分，以适应一个页面的死点。我找不到任何关于在可打印格式（如DomPDF）中垂直居中的资源。
边距只处理左侧和右侧，而顶部和底部没有任何影响。
我的CSS示例

@page
{
    margin-right: 1.5cm;
    margin-left: 1.5cm;
    size:8.5in 11in;
}

.page
{
    position: relative;
    display: flex;
}

.page-break
{
    page-break-after: always;
}

.intro-title-block
{
    margin: auto;
    text-align: center;
}

DomPDF Sample Sniphon

laravel

来源：https://stackoverflow.com/questions/68774986/how-to-vertically-center-a-div-in-a-page-and-print-dompdf-laravel

3条答案

按热度按时间

w80xi6nr1#

您可以使用display: table和display: table-cell

<div class="container">
  <div class="content">
    <!-- Your content here -->
  </div>
</div>

.container {
  display: table;
  width: 100%;
  height: 100%;
}

.content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

赞(0）回复(0）举报 2023-10-22

h43kikqp2#

DomPDF不支持Flexbox，我使用以下代码解决了它：

.page{
  position: absolute;
  transform: translateY(-50%);
}

赞(0）回复(0）举报 2023-10-22

mkshixfv3#

你可以用Flex显示器来设计页面的样式。

.page{
  display:flex;
  align-items:center;
}

赞(0）回复(0）举报 2023-10-22

我来回答

如何在@page中垂直居中div并打印(DomPDF和Laravel)

3条答案

相关问题

热门标签

最新问答