Menu
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>
253
First of all, it is vertical-align: middle, not vertical-align: center, see MDN - vertical-align.
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%;
}
and
p.paragrpahs {
height: 100%;
}
and then add the mentioned "ghost" element
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*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.
Update:
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>
and give this a
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*Then this inline-block span will again vertically align with the ghost (:before) element.
See updated JSFiddle.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
