I am using Node and Puppeteer to generate a PDF that uses a handlebars template. All is working as expected.
My only question is: how does one add border padding to the document, so that, if the document runs over multiple pages, the content doesn't go right up to the very edge of the page? Is there a style element I can use?
See my handlebars template below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PDF Result Template</title>
<style>
.container {
margin: auto;
padding: 30px;
font-size: 13px;
line-height: 13px;
font-family: 'Helvetica Neue', 'Helvetica';
color: #555;
}
.top-heading {
margin-bottom: -20px;
color: red;
}
.box {
width: 100%;
}
.table-box {
width: 100%;
table-layout: fixed;
}
.left-box {
float: left;
min-width: 25%;
max-width: 25%;
margin-top: -20px;
}
.right-box {
float: right;
min-width: 75%;
max-width: 75%;
}
.one-quarter {
border: #ccc thin solid;
max-width: 25%;
}
.half {
border: #ccc thin solid;
max-width: 50%;
}
.three-quarter {
border: #ccc thin solid;
min-width: 75%;
max-width: 75%;
}
.full {
border: #ccc thin solid;
max-width: 100%;
}
.highlighted {
font-weight: bold;
}
.flat-line {
border: none;
height: 1px;
background-color: #ccc;
}
.header {
clear: both;
margin-top: 120px;
text-align: center;
}
.centered {
text-align: center;
}
.details-cell {
padding: 0 8px;
}
.notes-table {
margin-top: 20px;
min-width: 100%;
}
.goal-heading {
font-weight: bold;
text-align: center;
}
.signature {
margin-top: 10px;
min-width: 100px;
max-width: 100px;
height: auto;
position: relative;
float: right;
}
</style>
</head>
<body>
<div class="container">
<table>
// Other code
</table>
</div>
</body>
</html>
You can access styling for the page like so:
#page {
margin: 10px 0;
}
So by adding the above to the handlebars template you're able to add the desired 10px of margin to the top and bottom of the document.
Related
I'm making a home automation website, I have an image that looks like a garage door; I'm using the images as buttons and I'm placing them in a table to help sort them. Now When I resize the .garage_door and make it width: 20%; there's still whitespace to it's right as if it was full size. I've tried everything including adjusting the padding and the margins.
#charset "UTF-8";
/* Body */
body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
min-height: none;
width: 100%;
height: 6%;
background-color: #E0115F;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 45%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
font-size: 120%;
overflow: hidden;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
font-size: 50px;
}
.controls {
padding-top: 5px;
}
/* Hero Section */
.pi_logo_top{
position: relative;
float: right;
right: 15px;
top: 5px;
height: 85%;
max-width: 7%;
min-width: 4%;
}
.controls {
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
position: relative;
}
.table_controls {
border: 2px solid black;
margin: 0px;
padding: 0px;
position: relative;
float: center;
right: 35px;
}
.light_on {
position: relative;
width: 75%;
}
.light_off {
position: relative;
}
.garage_door {
width: 20%;
margin-right: 0px;
padding-right: 0px;
}
/* Mobile */
#media (max-width: 515px) {
.logo {
width: 75%;
float: left;
margin-top: 13px;
margin-right: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
align: center;
display: inline-block;
}
.pi_logo_top {
position: relative;
top: 5px;
max-width: 20%;
min-width: 10%;
}
.table_controls {
border: 2px solid black;
position: relative;
right: -15px;
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImageLights() {
if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
}
}
function changeImageGarage() {
if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
}
else
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
}
}
function changeImageLightsOut() {
if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
}
}
</script>
</head>
<body>
<div class="container">
<header> <a href="">
<h4 class="logo">Home Automation</h4>
<img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
</a>
</header>
<div class="controls">
<table class="table_controls">
<tr>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
<td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Use the following CSS and there are some repeated css for table_controls in your code. Remove the unwanted css.
#charset "UTF-8";
/* Body */
body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
min-height: none;
width: 100%;
height: 6%;
background-color: #E0115F;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 45%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
font-size: 120%;
overflow: hidden;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
font-size: 50px;
}
/* Hero Section */
.pi_logo_top{
position: relative;
float: right;
right: 15px;
top: 5px;
height: 85%;
max-width: 7%;
min-width: 4%;
}
.controls {
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
padding-top: 5px;
position: relative;
height: 90px;
}
.table_controls {
border: 2px solid black;
margin: 0px;
padding: 0px;
position: relative;
float: right;
}
.light_on {
position: relative;
width: 75%;
}
.light_off {
position: relative;
}
.garage_door {
width: 20%;
margin-right: 0px;
padding-right: 0px;
}
/* Mobile */
#media (max-width: 515px) {
.logo {
width: 75%;
float: left;
margin-top: 13px;
margin-right: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
align: center;
display: inline-block;
}
.pi_logo_top {
position: relative;
top: 5px;
max-width: 20%;
min-width: 10%;
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImageLights() {
if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
}
}
function changeImageGarage() {
if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
}
else
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
}
}
function changeImageLightsOut() {
if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
}
}
</script>
</head>
<body>
<div class="container">
<header>
<a href="">
<h4 class="logo">Home Automation</h4>
<img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
</a>
</header>
<div class="controls">
<table class="table_controls">
<tr>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
<td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Okay guys so I have created multiple div classes, and they seem to work. But when I want to add another div class underneath them, it just doesn't show up.
Here's my html code;
<!DOCTYPE html>
<html>
<head>
<!--LINKING THE STYLESHEETS-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--DO NOT EDIT THIS STYLE SHEET-->
<link rel="stylesheet" type="text/css" href="reset.css">
<style>
html, body {min-width: 600px; background-image: url(bg.jpg);}
/*Navigation Bar*/
ul
{
list-style-type:none;
margin:0;
padding:0;
background-image: url(nav_bg.png); background-repeat: repeat;
border-style: solid;
border-color: #fff;
width: 50em;
height: 50px;
margin-left: auto;
margin-right: auto;
}
ul.nav {
margin-left: auto;
margin-right: auto;
margin-top: 1em;
width: 80%;
text-align: center;
border-style: solid;
border-color: #fff;
border-width: 2px;
}
li
{
display:inline;
text-align: center;
margin: 30px;
}
.nav a {
line-height:50px;
}
#font-face {
font-family: corbel;
src: url('fonts/corbel.ttf');
}
#font-face {
font-family: orator;
src: url('fonts/OratorStd.otf');
}
/*CUSTOMIZING THE LINKS*/
a {
color: #fff;
text-decoration: none;
font-family: corbel;
font-size: 18px;
}
a:visited {
color: #fff;
}
a:active {
color: #fff;
}
a:hover {
color: #111;
}
/*THE CONTAINERS*/
.box-long {
width: 80%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}
.box-half-long {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 9.9%;
margin-top: 1em;
float: left;
}
.box-half-long-r {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 50.5%;
margin-top: 1em;
}
/*Keeping images in containers even when browser resizes. */
img {
width: 100%;
height: 100%;
}
/*styling headers*/
h1.center {
text-align: center;
line-height: 110px;
font-size: 30px;
color: #fff;
font-family: orator;
}
h2.center {
text-align: center;
line-height: 110px;
font-size: 30px;
color: #fff;
font-family: orator;
}
</style>
</head>
<body>
<ul class="nav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div class="box-long">
<h1 class="center">SERVER BANNER HERE</h1>
<!--YOU COULD AD AN IMAGE HERE. REMOVE THIS COMMENT AND DELETE THE <H1> TAGS TO SEE
IT WORKING WITH AN IMAGE. IMAGE SIZE IS -->
<!-- REMOVE ME FOR IMAGE // <img src="server_banner.jpg"> // -->
</div>
<div class="box-half-long">
<h2 class="center">SUB-CAT 1</h2>
</div>
<div class="box-half-long-r">
<h2 class="center">SUB-CAT 2</h2>
</div>
</body>
</html>
Here's the site this code is on: here
So, when I go ahead and add a new div class at the end, for example, this; (p.s, yes I know the div hasn't been set up in css, this is just a demonstation..)
.box-newdiv{
width: 80%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}
It just doesn't show up?
EDIT: Link is now working to view.
The reason you can't see the new div's is because you have provided fixed height for the div having the classes named as "box-half-long" and "box-half-long-r".
.box-half-long-r {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 50.5%;
margin-top: 1em;
}
.box-half-long {
width: 39.4%;
height: 100px;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 9.9%;
margin-top: 1em;
float: left;
}
Since they have a fixed height, they don't show the elements contained in them which lie below the height of 100px.
Let the height 'adapt' to the height of the containing elements. You can do this by:
height :auto;
Just change these classes to:
.box-half-long-r {
width: 39.4%;
height: auto;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 50.5%;
margin-top: 1em;
}
.box-half-long {
width: 39.4%;
height: auto;
border-style: solid;
border-color: #fff;
border-width: 2px;
margin-left: 9.9%;
margin-top: 1em;
float: left;
}
I have added new div's to show that they can be displayed once you change the hieght to auto.
Just see here : http://jsfiddle.net/Bj3vr/
Hope this helps you to understand the concept of using "height as auto" and solves your issue.
I can't see the example but first thing I noticed is
.box-long {
height: 100px;
This could be why
EDIT:
Works for me: http://jsfiddle.net/4rhAz/
I have a div below two floating divs (one floating left and the other right). As I opened up the element inspector I noticed something odd. Why is it that a div below that with the css property clear: both overlaps the top two? Also, when I change the height of the div, the element inspector shows that the div no longer contains its contents. Here are two screenshots to show what I mean. The code is below the screenshots.
No height set in css:
Height of class "tags" set to 200px in css:
HTML for page
CSS for page
You have syntax errors in your CSS. You have some classes inside of other classes which won't work and also you have some unclosed brackets. I fixed it below
#container {
width: 900px;
min-height: 500px;
margin: auto;
background: #DDDDDD;
}
.entry {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.title {
text-align: center;
}
.name {
padding: 0px 10px;
}
.tag {
display: inline-block;
}
.link {
border: 1px solid black;
display: inline-block;
padding: 10px;
text-decoration: none;
}
.info {
width: 610px;
margin: auto;
}
.input-text_area {
width: 300px;
height: 250px;
padding: 0;
border: none;
resize: none;
}
.input-text_field {
width: 300px;
padding: 0;
margin: 0;
border: none;
}
.input-button {
width: 75px;
height: 50px;
margin: 2px 0px;
display: block;
float: right;
}
select {
float: right;
margin: 0px;
}
.right_half {
float: left;
padding: 1px;
height: 300px;
width: 300px;
}
.left_half {
float: left;
padding: 1px;
height: 300px;
}
.tags {
height: 200px;
}
label {
display: block;
}
.text_field {
width: auto;
}
.block-label {
display: block;
}
Trying to get the grey box on the right to centre align without adding margins/padding to it:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; }
h3 span { margin-left: 0.5em; }
a { float: right; text-align: right; }
a span { vertical-align: middle; background-color: #ccc; width: 1em; height: 1em; color: #fff; margin-right: 0.5em; display: inline-block; }
#content { height: 16em; }
</style>
</head>
<body>
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
</body>
</html>
http://jsfiddle.net/hotdiggity/4yGh8/
There are a few different ways to go about this, but none of them are perfect.
I've modified the markup slightly to make it easier to write selectors for:
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
CSS Tables
The result might not be pretty if you have content that's going to wrap:
http://jsfiddle.net/4yGh8/4/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; display: table; width: 100%; }
h3 span { display: table-cell; vertical-align: middle; }
h3 span { padding: 0 0.5em; width: 100% }
h3 span:last-child { width: 1px; line-height: 1; }
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Flexbox
Make sure you check http://caniuse.com/#search=flexbox to see which prefixes you need to make this work.
http://jsfiddle.net/4yGh8/6/ (prefixes not included)
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
display: flex;
width: 100%;
justify-items: space-between;
align-items: center;
}
h3 span {
margin: 0 .5em;
}
h3 span:first-child {
flex: 1 1 auto;
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Absolute Positioning
http://jsfiddle.net/4yGh8/7/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
position: relative;
}
h3 span {
padding: 0 .5em;
}
h3 span:last-child {
position: absolute;
right: 0;
top: 50%;
margin-top: -.5em; /* half of the element's height */
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
2 things you can do.
add another box en limit is in width until your block is in the middle with float right
use margin & padding
You just need to add position:relative to your #frame and then position:absolute;top:0;bottom:0; margin:auto; to yout #header. I edited your fiddle
I'm trying to vertically align text in a box that has a height that changes to match the width (so that it's a perfect square). I just cannot get it to work. I have 2 issues:
I'm trying to vertically align the text within the "smallbox" class.
Besides this, I also cannot get the "text" class to vertically align either.
Here's my fiddle
Here's my CSS:
* {
margin: 0;
padding: 0;
}
html, body {
background: yellow;
font-size: 2.5vmin;
}
body {
text-align: center;
}
#container {
margin: 0 auto;
width: 100%;
}
.box {
/*width: 200vmin;*/
width: 90%;
margin: 0 auto;
display: inline-block;
/*padding-bottom: 5vmin;*/
padding-bottom: 2.5%;
}
.smallbox {
position: relative;
float: left;
vertical-align: middle;
width: 16.8%;
border-radius: 2vmin;
font-size: 6vmin;
text-align: center;
word-wrap: break-word;
display: table;
table-layout: fixed;
color: red;
background-color: blue;
}
.smallbox b {
margin-top: 100%;
display: block;
zoom: 1.0;
}
.smallbox p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-decoration: none;
display: table-cell;
vertical-align: middle;
}
.content {
width: 80%;
min-height: 28vmin;
background-color: white;
float: right;
border-radius: 2vmin;
font-size: 3.5vmin;
position: relative;
padding-bottom: 5vmin;
}
.content:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -4.75vmin;
top: 13.5vmin;
border-top: 3vmin solid transparent;
border-bottom: 3vmin solid transparent;
border-right: 5vmin solid white;
}
.title {
height: 5vmin;
padding: .75vmin 1.5vmin;
border-radius: 2vmin 2vmin 1vmin 1vmin;
margin: .5vmin;
font-weight: bold;
text-align: left;
color: red;
background-color: blue;
}
.text {
padding: .5vmin 2vmin;
text-align: center;
}
.left {
padding: .5vmin 2vmin;
position: absolute;
bottom: 0;
font-weight: bold;
}
.right {
padding: .5vmin 2vmin;
position: absolute;
bottom: 0;
right: 0;
font-weight: bold;
border-radius: 2vmin 2vmin 2vmin 2vmin;
margin: .5vmin;
color: red;
background-color: blue;
}
.right a {
text-decoration: none;
}
.arrowleft {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
Here's my HTML:
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="box.css">
</head>
<body>
<div id="container">
<div class="box">
<div class="smallbox"><b></b><p>Onceuponatimeinafarawayland</p></div>
<div class="content">
<div class="title">Some Title</div>
<div class="text"><p>This is just some example text here</p>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</div>
</div>
</body></html>
Add this CSS:
.smallbox p:before{
content:" ";
display:inline-block;
vertical-align:middle;
height:100%;
width:1px;
}
.smallbox p span{
display:inline-block;
vertical-align:middle;
width:99%;
}
Credit goes to Paul.
You're using position: absolute; on the paragraph within the .smallbox class which is forcing it to display block, so vertical-align will have no effect. In the fiddle below I used the line-height property to align the .smallbox text though I don't think that'll work with a dynamic height.
I also centered the .text class paragraph by adding display: inline-block; and using the px value for vertical-align. Just adjust it to your needs.