Howto center text vertically and horizontally on a single page in mpdf
(I know the answer, stackoverflow just makes me write a longer question to be allowed to post it with my answer here ...)
While mpdf supports some css, a couple of things that would allow you to center via CSS are not working:
display: flex is not working
<table> with height: 100% is not working
<div style="position: absolute; top: 50%; left: 50%;"></div> is not working
But, I did find one trick: $mpdf->hPt and $mpdf->wPt return the pages dimensions in points.
Which means you can use a table cell with height: {$mpdf->hPt}pt; vertical-align: middle; text-align: center;:
$mpdf = new \Mpdf\Mpdf($options);
$h = $mpdf->hPt;
$w = $mpdf->wPt;
$html = <<<HTML
<html>
<body style="margin: 0; padding: 0;">
<table style="width: {$w}pt; margin: 0; padding: 0;" cellpadding="0" cellspacing="0">
<tr>
<td style="height: {$h}pt; text-align: center; vertical-align: middle; padding: 0px 5px; margin: 0;">
Hello World
</td>
</tr>
</table>
</body>
</html>
HTML;
$mpdf->WriteHTML($html);
Obviously, using the dpi to calculate that value yourself would be an option, but using mpdfs calculation ensures you have the same rounding and handling of edge cases.
Related
I've found some very strange behaviour with Chrome with respect to the following CSS...
CSS:
table.addressBody {
width: 100%;
min-width: 100%;
}
table.addressBody tr td {
padding: 4px;
width: 40%;
min-width: 40%;
max-width: 40%;
border: none;
vertical-align: middle;
}
table.addressBody tr td.left, table.addressBody tr td.right {
background-color: White;
border: 2px solid #aaa;
}
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
text-align: center;
}
HTML:
<div class="fitWidth centre">
<strong>Mr Smith</strong><br />
29/05/2014 11:17:00 - Department, Site
</div>
<table class="addressBody">
<tr>
<td class="left">
<select name="ctl00$phBody$repPatients$ctl01$ddlPickup" id="ctl00_phBody_repPatients_ctl01_ddlPickup"></select>
</td>
<td class="centre" style="border: none;"> </td>
<td class="right">
<select name="ctl00$phBody$repPatients$ctl01$ddlDest" id="ctl00_phBody_repPatients_ctl01_ddlDest"></select>
</td>
</tr>
<tr>
<td class="leftShadow" colspan="2">
<img src="../img/other/bottomShadowLt.png" alt="Shadow" />
</td>
<td class="rightShadow">
<img src="../img/other/bottomShadowRt.png" alt="Shadow" />
</td>
</tr>
</table>
(Fiddle)
The problem is the centre cell of the table which has a bottom border, despite the fact that I haven't actually specified that there should be one. I've tried the same code in both IE and FF and both produce the desired result (two outer cells with borders and the inner without).
I have also tried coding the CSS in turn for each border on all of the cells, but as soon as I code the #left cell bottom-border the centre cell is also bordered on the bottom. Also, notice in relation to this question there is no border collapse in the code (unless it's part of Fiddle itself).
Can anyone spot anything obvious that I've missed or know of any bug with Chrome that has a workaround?
-- EDIT --
But you did specify that it have a bottom border:
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
border-bottom: 2px solid #aaa; <---
text-align: center;
}
As it turns out, my post is, in fact, a duplicate of this question, and so, if you wish to close it, please feel free.
I'm trying to sort out quite a challenging issue. I have a header of a website into which three random picture will be generated. The collection of picture is quite huge and so the aspect ratio vary from picture to picture.
The header of the web is in fact a responsive table with one row and three table cell:
.header table {
width: 94%;
border: 0;
background: transparent;
margin-left: 5%;
margin-right: 5%;
vertical-align: middle;
display: table;
}
Now what I'd like to do is to:
Keep the table responsive (i.e. if possible avoid defining width and height with pixels and use rather "%") => like this:
.header td {
display: table-cell;
width: 25%;
height: auto;
text-align: center;
vertical-align: middle;
}
...but at the same time, to fit three random picture into to the table cell without changing the size or aspect ratio of the table cell... It means that some pictures will be cropped.
I was experimenting with the css3 attribute contain:
.header td {...
background-repeat: no-repeat;
background-size: contain;
...}
<table class="header">
<tr>
<td class="header" style="background-image:url('img/random1.jpg')">
</td>
<td class="header" style="background-image:url('img/random2.jpg')">
</td>
<td class="header" style="background-image:url('img/random3.jpg')">
</td>
</tr>
</table>
But it this attribute doesn't seem to be friend with the td tag...
Anyways, I'm not actually insisting on the "table" solution. Does anyone have any kind of work around how to:
Make three pictures in a "row" responsible
Fit them into frames which don't change their proportion
?
Pure CSS solution is preferable but I guess it might not be possible.
First of all you need some kind of a width and hight relation, otherwhise you woun't get a responsive behavior.
So i did some dirty hack ^^
I insert a image into each td that gives me the relation, then i hide it with opacity 0 (won't work in ie8). Now if you want to insert some other contetn then work with positions and seperate containers.
HTML:
<table class="header">
<tr>
<td class="header" style="background-image:url('img/1.jpg')">
<img src="img/1.jpg" />
</td>
<td class="header" style="background-image:url('img/2.jpg')">
<img src="img/1.jpg" />
</td>
<td class="header" style="background-image:url('img/3.jpg')">
<img src="img/1.jpg" />
</td>
</tr>
</table>
then i altered your CSS:
table {
width: 94%;
border: 0;
background: transparent;
margin-left: 5%;
margin-right: 5%;
vertical-align: middle;
}
td {
width: 25%;
height: auto;
text-align: center;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
display: inline-block;
}
td img {
opacity: 0;
width: 100%;
height: auto;
}
It's looking kind a wierd becaus im using a table layout and then i overwrite the tabel display behavior (display: inline-block), but im missing some backround informations so i decided to use exact yout html.
Here you can see the result JS Fiddle
I have an asp page where I am trying to align in center. The following is the specific line,
<td style="height: 50px; background-color: #ffffe0; text-align: center; ">
This code is working fine in IE, but in FF and chrome, the text is aligned in left. If I change the same code as
<td style="height: 50px; background-color: #ffffe0; text-align: -moz-center; ">
Then the alignment is working only in FF. IE and chrome fails :(. Can anyone tell me how to solve this issue ?
UPDATED:
The whole table structure looks like this,
<table style="width: 900px; height: 500px; background-color: gray;">
<tbody>
<tr>
<td style="height: 70px; vertical-align: middle; background-color: #fffff0; text-align: center !important; width: 160px;">
<div id="abc" style="height:40px;width:80px;text-align: center !important ;left: 0px; position: relative; top: 0px" onscroll="JavaScript:document.getElementById(somejavascrpt)'">
<input id="button" type="image" style="height:40px;width:60px;border-width:0px;z-index: 104; left: 4px; text-align: center !important position: absolute; top: 2px" src="../images/help.png" name="help">
</div>
</td>
use both text-align: center; and text-align: -moz-center;
<td style="height: 50px; background-color: #ffffe0;
text-align: -moz-center;text-align: center; ">
Edit 1
You can also try
<td style="height: 50px; background-color: #ffffe0;text-align: center!important;">
Edit 2
You can use fire bug and see what rule is applied on your td
Some link how to use firebug
http://www.studiopress.com/tips/using-firebug.htm
http://net.tutsplus.com/tutorials/other/10-reasons-why-you-should-be-using-firebug/
If it doesn't work for you, you have some other rule somewhere else that is overriding your style. Text-align is perfectly all-browser-friendly.
I'd suggest two things:
stop using inline styles. Styling doesn't have a place in your html, it should be defined in a separate file.
use webdeveloper tools in your browser to find out which rules apply to your TD and make sure you've defined only one rule
There may be different ways to do this. One of the ways is to use left margin. Unless your position is relative, you may use this. For example-
style="margin:0 0 0 100px"
Try using html attribute.
<td align="center" style="height: 50px; background-color: #ffffe0;">
I have some Sharepoint-produced HTML markup which is not the best you've seen, and cannot interfere in the markup, but have to style it via CSS.
The markup goes more or less like this:
<div id="searchbox">
<table>
<tr>
<td>
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
<div id="fontsize">
<a href=""/>
<a href=""/>
</div>
</div>
Here is the CSS applied
#searchbox {
float: right;
margin-right: 15px;
margin-top: 10px;
text-align: right;
width: 40%;
}
#fontsize {
float: right;
width: 46px;
}
.mstable {
border-collapse: collapse;
margin-left: 2px;
margin-top: 2px;
width: 100%;
color: #000000;
font-family: Verdana;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
}
What I am trying to do is put the fontsize div, next to the table. Currently, after the table there's a break and the fontsize id goes under it.
I set display:inline to all the table descendants of searchbox and the fontsize div, and in Firefox I get the desired result, but in IE (all versions 8 and below) it ignores it..
I know my solution would be to remove these tables and make it div-only but I don't know if I have this possibility..
Edit: I resolved the problem by setting float:left to both table and fontsize div AND setting a width in pixels to the table itself such as to limit it from expanding to the whole searchbox div.
This should do it for you :
http://jsfiddle.net/nULYR/8/
works in ie7+
EDIT
<table>
<tr> // here is
<td> // the problem
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
With : http://jsfiddle.net/nULYR/13/
Without : http://jsfiddle.net/nULYR/12/
try to float left the table that comes directly after the 'searchbox' div:
<div id="searchbox">
<table style="float: left;">
I want to align my images similar to this page: http://nymanssnickeri.se/
My content div is 900px wide. As you can see, image #1 and #3 are located at the edge of the content div. On this page margin is only used on the image in the middle. If there wasnt more than 3 images, i could use first-child selector on the first image and the problem would be solved. But sometimes there will be multiple rows of images. Any ideas how to accomplish this in a good way? Thanks
You can give every image equal horizontal margins, and then on the first and last, add a class and have margin-left: 0 and margin-right:0, respectively. You'll have to play with the margin size / math a bit to get it right.
Example:
#container img { margin: 0 20px; }
#container img.first {margin-left: 0; }
#container img.last {margin-right: 0; }
20px is just a random number I chose. It depends on your image sizes, and how many you have.
Edit:
Math for the margins (check this, just made it up on the fly):
(total container width - total width of all images ) / (total number of images - 1) * 2
If you would like to have three images per row and not have to worry about setting pixel margins to achieve the effect you can do something like this...
Demo: http://jsfiddle.net/ENQTZ/1/
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
div {
text-align: center;
margin-bottom: 20px;
}
span {
display: block;
width: 32%;
height: 100px;
background-color: red;
}
.a {
float: left;
}
.b {
float: right;
}
.c {
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
top: 0px;
}
If the layout is known ahead of time, including number of photos, etc. You could use a table:
<table width="900"><tr><td><img /></td><td><img /></td>
<td><img /></td></tr></table>
Or you could use a div, and concatenate these to create multiple rows:
<style
div#img-container { width: 900px; }
div#img-container img { display: block; }
img.lft { float: left; }
img.mid { margin: 0 auto; }
img.rgt { float: right; }
</style>
<div id="img-container">
<img class="lft"/>
<img class="mid"/>
<img class="rgt"/>
<br />
</div>
You might need to reset margins, paddings and borders to 0 on the images to use this method, otherwise the images will overflow slightly and not align correctly.
<center>
<div ID="Content" Style="Width:900px">
<center>
<table>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
</table>
</center>
</Div>
</center>
Any of this useful to you? This is my template that I use. just add more td tags for more cells, and more tr tags for more rows of images.
Further, You can style your images to the exact size they need to be, but be careful that stretching / squashing might occur
<img ID="Image" src="Image/Cat.png" alt="Cat.png" style="Width:50px;Height:50px" />