在页面中心以html打印文本 [英] Printing text in html in the center of the page
问题描述
我有一个下一个问题试图通过google找到，但没有找到可以帮助我的东西.我有一个需要打印的HTML大文件，要使用CSS break-after分隔页面.
问题是:如何在页面的中心打印元素，不仅是水平居中，还是垂直打印. HTML看起来像这样:
I have a next question-tried to find it with google, but didn't find what could help me. I have a big HTML file that I need to print, to separate pages I use CSS break-after.
The quesion is: how can I print an element in the center of the page, not only horizontal center but vertical too. The HTML looks like this:
<!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，请参见
First of all, it is vertical-align: middle, not vertical-align: center, see MDN - vertical-align.
有一篇不错的文章，关于以 CSS技巧-以未知为中心.将此转移到您的示例中，您必须先设置
There's a nice article about centering at CSS Tricks - Centering in the Unknown. Transfering this to your example, you must first set
html, body {
height: 100%;
}
和
p.paragrpahs {
height: 100%;
}
然后添加提到的"ghost"元素
and then add the mentioned "ghost" element
p.paragrpahs:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
这将在整个页面上为您提供垂直居中的文本，请参见 JSFiddle .当然，当您同时使用p.paragrpahs(sic?)进行其他操作时，则应该添加一个单独的vcenter类或类似的类.
This will give you a vertically centered text on a whole page, see JSFiddle. When you use p.paragrpahs (sic?) for other things as well, you should add a separate vcenter class or similar, of course.
更新:
不幸的是，如果文本较长(多于一行)，则此方法将无效.如果文本较长，则可以将文本包装到span元素
With longer text (more than one line), this doesn't work, unfortunately. If you have longer text, you can wrap the text into a span element
<p class="paragrpahs"><span>Lorem ipsum dolor sit amet, ...</span></p>
并为此
p.paragrpahs span {
display: inline-block;
}
然后，该inline-block span将再次与ghost(:before)元素垂直对齐.
Then this inline-block span will again vertically align with the ghost (:before) element.
请参阅更新的 JSFiddle .
这篇关于在页面中心以html打印文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
