gpt4 book ai didi

html - 在页面中央以html格式打印文本

转载 作者:行者123 更新时间:2023-11-28 00:03:43 27 4
gpt4 key购买 nike

我有一个下一个问题 - 试图用谷歌找到它,但没有找到可以帮助我的东西。我有一个很大的 HTML 文件需要打印,我使用 CSS break-after 分隔页面。问题是:我怎样才能在页面的中心打印一个元素,不仅水平居中,而且垂直居中。 HTML 看起来像这样:

<!DOCTYPE html>
<html>
<head>
<style>
@media all {
body
{
text-align:left;
}
p.paragrpahs
{
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:32px;
font-weight:bold;
vertical-align: center;
}
.break_here
{
page-break-before:always;
}
}
</style>
</head>

<body>
*Tons of text*
<p class="break_here"><p class="paragrpahs">Some text</p><p class="break_here">
*Tons of text*
</body>
</html>

最佳答案

首先是vertical-align: middle,不是vertical-align: center,见MDN - vertical-align .

有一篇关于以 CSS Tricks - Centering in the Unknown 为中心的好文章.将此转移到您的示例中,您必须首先设置

html, body {
height: 100%;
}

p.paragrpahs {
height: 100%;
}

然后添加提到的“幽灵”元素

p.paragrpahs:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}

html,
body {
height: 100%;
}

p.paragrpahs {
height: 100%;
}

p.paragrpahs:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
*Tons of text*
<p class="break_here">
<p class="paragrpahs">Some text</p>
<p class="break_here">
*Tons of text*

这将在整个页面上为您提供垂直居中的文本,请参阅 JSFiddle .当然,当您将 p.paragrpahs(原文如此?)用于其他用途时,您应该添加一个单独的 vcenter 类或类似类。

更新:

不幸的是,对于较长的文本(超过一行),这不起作用。如果你有更长的文本,你可以将文本包装到一个 span 元素中

<p class="paragrpahs"><span>Lorem ipsum dolor sit amet, ...</span></p>

给这个

p.paragrpahs span {
display: inline-block;
}

html,
body {
height: 100%;
}

p.paragrpahs {
height: 100%;
}

p.paragrpahs:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}

p.paragrpahs span {
display: inline-block;
}
*Tons of text*
<p class="break_here">
<p class="paragrpahs"><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</span></p>
<p class="break_here">
*Tons of text*

然后这个 inline-block span 将再次与 ghost (:before) 元素垂直对齐。

查看更新 JSFiddle .

关于html - 在页面中央以html格式打印文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19798923/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com