I would like to centre image in mpdf (version 6>).
This is my (shortened) html output that I send to mpdf. The displayed class does not help.
<style>
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
</style>
<img style="max-height:600px" class="displayed" src="/images/size_original/m_princezna_1.jpg"/>
Add a text-align: center property on a parent HTML element of the image, eg.:
body { text-align: center }
I tried the solution of Finwe but that moved the image to next page. So did a workaround with a combination of solutions here of Ram Guru99 and there :
<table style="width:100%;">
<tr>
<td align="center">
<img src="<?php echo $imagepath ;?>"/>
</td>
</tr>
</table>
You can use below code to center image in the page.
<p style="text-align:center;">
<img src="imageurl.png"/>
</p>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a database with lots of records and I have to make a foreach loop in order to get all that data. The problem is that a chart for every data would overload the page. So I need to make a barlike chart using two divs and one div(the blue one) to take percentage of the main one (the grey div) accourding to the value from that data. I did all of that but I don't know how to make the inner div build change it's percentage width according to how close it is from the highest value in my database. This is how I fetch the numbers shown in the right.
<?php echo #$item->{"media_count"}; ?>
I will attach an image so you can see how I need to make it look like.
barlike chart
<table class="table table-bordered">
<tbody style="width: 401px; border: 0;">
<?php foreach ($data->data->data as $key => $item):
if (#$item->{"name"}) {
?>
<tr>
<td>
<?php echo #$item->{"name"}; ?>
</td>
<td>
<div class="outer">
<div class="inner" style="width: 20%;"></div>
</div>
</td>
<td>
<?php echo #$item->{"media_count"}; ?>
</td>
</tr>
<?php }
endforeach ?>
</tbody>
</table>
Is this the sort of layout you are looking for?
.outer, .inner {
height: 20px;
margin-bottom: 5px;
}
.outer {
background-color: gray;
width: 200px;
}
.inner {
background-color: blue;
}
<div class="outer">
<div class="inner" style="width: 20%;"></div>
</div>
<div class="outer">
<div class="inner" style="width: 40%;"></div>
</div>
<div class="outer">
<div class="inner" style="width: 60%;"></div>
</div>
Create a full width div, set the height and width and color it gray. Then, inside that div, create another div with no margin, set the height and color it blue. Set the width of the blue div to the width that you want it.
You could use absolute positioning for the bars inside a relatively positioned div to make the bars follow the outer div.
.outerGraph {
position: relative;
width: 400px;
height: 200px;
background-color: #fff;
}
.value {
position: absolute;
height: 20px;
right: 10px;
}
.bar {
position: absolute;
background-color: blue;
height: 20px;
left: 10px;
}
.bar1 {
top: 10px;
}
.bar2 {
top: 40px;
}
.bar3 {
top: 70px;
}
<div class="outerGraph">
<div class="bar bar1" style="width: 75px;" title="88204"></div>
<div class="value bar1">88204</div>
<div class="bar bar2" style="width: 100px;" title="92784"></div>
<div class="value bar2">92784</div>
<div class="bar bar3" style="width: 200px;" title="100000"></div>
<div class="value bar3">100000</div>
</div>
Use the title attribute on the bars for the hover effect and apply the bar[] class for both bars and their numbers.
Honestly, I cannot think of a reason you shouldnt just use javascript; you should tell us why you want this and post some code of your own
I have this code
<?php
echo '<p style="text-align: center;"><img src="tran.png"/></p>';
echo '<p style="text-align: center;"><img src="courselist.png"/></p>';
?>
but when I run it show me this icons(pictures) under each other
like this
ICON1
ICON2
How I can make it next each other like this and I want the icons still in the middle of the page.
ICON1 ICON2
You can easily do that by using by using display inline and margin auto atribbutes!
CSS:
.imgcenter {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#images{
text-align:center;
}
HTML
<div id="images">
<a href="tran.php?page=A">
<img class="imgcenter" border="0" alt="Mail" src="http://megaicons.net/static/img/icons_sizes/8/178/512/social-networks-instagram-icon.png"/>
</a>
<a href="course_list.php?page=A">
<img class="imgcenter" border="0" alt="Facebook" src="http://megaicons.net/static/img/icons_sizes/8/178/512/social-networks-instagram-icon.png"/>
</a>
</div>
Running example:
http://jsfiddle.net/X3b5g/389/
Use one p tag.
<?php
echo '<p style="text-align: center;"><img src="tran.png"/> ';
echo '<img src="courselist.png"/></p>';
?>
Remove the p tag. Or css them style="display: inline"
Meaning:
<p style="display:inline">.... rest of code
But unless the p tag is needed you can remove it and just use the center tag instead
I am generating a pdf using DOMPDF but in that the image is not displaying instead it is throwing an error "Image not found".
Here is my code :
require_once "dompdf_config.inc.php";
require_once('html2_pdf_lib/html2pdf.class.php');
include_once('../config.php');
$file = "www/test/mytest.php";
$html=file_get_contents($file);
$dompdf = new DOMPDF();
//$dompdf->load_html($my_html);
$dompdf->load_html_file('https://www.lettertowomen.com/admin/dompdf/www/test/mytest.php?id=111');
$dompdf->render();
$dompdf->stream("sample.pdf");
mytest.php
<body>
<form action="" method="POST">
<table width="1000" height="1000" style="background-color: #b91781;font-family: 'DejaVuSerif'; color: #ffffff;font-size: 20px;">
<tbody><tr>
<td width="249" valign="middle" align="center">
<div style="height: 595; width: 249; text-align: left;padding-top:140px;">
<img src="<?php echo base_url;?>uploads/<?php echo $result['image'];?>" style="border-radius: 159px;
width: 159px; height:225px;margin:70px auto 0;">
</div>
</td>
<td width="583" valign="middle" align="center">
<div style="height: 188px; width: 448px; text-align: left;">
<span style="display: block;
float: left;">To <span style="font-size: 22px; font-weight: 700; line-height: 34px; position: relative; top: 17px;"><?php echo $result['recipient_name'];?></span>
</span><br><br>
<div style="clear: both; display: inline-block; min-height: 160px; padding: 0px 18px; margin: 28px auto 0px;color: #ffffff">From the day you were born,<br>
I fell in love with you my girl.<br>
And when you bloomed like a rose without a single thorn,<br>
You turned my entire life into a most precious pearl.<br>
Your love and care for me is a beautiful dawn,<br>
That marks the end of darkness left to unfurl.<br><br>
Feeling blessed to have you as my daughter. </div>
<br><br>
<span style="display: block;
float: right;">From<span style="font-size: 22px; font-weight: 700; line-height: 34px; position: relative; top: 18px;"><?php echo $result['sender_name'];?></span>
</span></div>
</td>
</tr>
</tbody></table>
</form>
</body>
</html>
everything is displaying but image is not displayed. I have check already asked question in stackoverflow : dompdf not displaying image generated by PHP file but it is not working in my case
Also I have set DOMPDF_ENABLE_REMOTE = true
Thanks in advance
You can use Base64 image data
$html = '<div>
<p>IMAGE</p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABMCAIAAACnG28HAAAABmJLR0QA/wD/AP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1AgeBS42B7vBqgAAEhBJREFUeNrtnd%2BPHEcVhfcfBoknxAOIh0g88EsIIqKI1UprObYVe23FwQmskO0EYSskkCgkEo5MCMgoGBABhBDkIXzV3%2Byh6Onu6ZnZ2Zm1u1Qa9fb0VFfdOvfcW7du9%2B59NpWpbKDsTSKYygSsqUzAmsoErKlMZQLWVDZeHj3%2B67vvf/DSjZcODy/%2B9N5bH374O85MwJrKWpACT/vPfe%2B5Z5/97re/8cxXv/L1rz3DwcEPngdhS8FrAtZUZgWWuvHiJcBkBVugivrlL30RbB0eHLx5784ErKksUWCj6zd/DHqAEZD6wuc/x8GNo6uvvnLLPwGZZnEC1lSWsH1CSnKyiq3LV657Ust45dLFCVhTGVXACoiJOyWe8LHEmSdfu3NbK7krphBtgDzp0zR/uynSt3/xJl65AKLKVaDq4YN3WQny%2Bdrxy5cv7MNb1KXs4AaBRc/UhqX4cyrDnhCOjjhgptfHKI3IVVR569Wb1/78x0f1ZWCL88BrKbraFLAgT/CkNkzAOi2uCqqs6/AWremtp7Log8D%2B/emnrSvhLSC1LKo2AixFoD8ItQIv2GtCxvp0VTvXiHcdqbLcC6RwzJkjUTUPLI1Pi8a2Ayw6gaMXKbBqBfUTMtYsPzq%2BG08IF3sdYIFRHCmNIKjieAVC2gKwGLBeocCi6whlQsb6RkBPKLGAldUV10qMGlXHi9pEn08fWFAUfhXunr0HYRDYClw6lRpYiLQ2hQh22WVaC6OGFZisDU3N6QMLDaC7ki0uIeZ8ijisDyzE6GIo2GKFtEJT%2BOz8lnZ0rTbnpZw%2BsDDYAAvG0n%2BffKz1S4lPHl3Vu8AOruy8S1dx/7Ekm%2BvzBhjrzu2oFxXSegrtIFNo8slptebGi8DSxwJYnYu44RWAnKd3hSt8noDFgI3YylhQ7kYHsGvUgutDRbtgbkTBGfVqHe0CWDAWKiosXBsuuySiJ86IaTBM0EYVfm8Twi2kdfOaw8DZWs0bOHcFGDHZKBKONkNGnUAYxyCM84hFyawWJsAIACwhlbSWpRKkErsCVTS1ocXgqQELYSFBPiMvIEXFfkvd5og9DVwFaJgwgcUB3gxjRxRMP9gqJw8vMrsYtWUTMrkeaBp5j/PO8XjKYXYuX7lOf6iJiO4osPQhkKYsTeVPrD49dksnOWJPPGMxcGadITNnVNDDkJMj4CauAikr5cOLLM24YAy83B%2BkmsHilk4ChOPJL0FRezhgB51WWrZ6Jp/1ZacMLG9MR8ETyocmISM6ypgRKF3hJFUfa6nxOxJNhgdb9LuXWqww8abzFhAcHMBS2kGEAHPzybclntdooJeBswHOkKLkmGRyBlL672XP%2BJVb4912usHd458AbmuSF6ia8mxH6iLzSTf4oV2iemD/6Wrn/O6toJ2aOW42k2YjShMZEFlR2ZvXSip%2B42xyfgxEVPE4Afyc1pbNs14fUnT14YN3A%2B5RJubCPl1ljvkEOoh7ngw4w/lco6D6RqdyImQFIra0X5wxpZPKwch4AQ26Tk%2BSTNDZqn3n/cpbJ0Ir9eqxzQ95OWDRxYLxkxVftgXMkPFYgDsGBIFAF4JDolYvNRY2qM%2B7vp1a2AEukGPMduKTP8cAy0cP6HCBQoOqgYsLtnBAGzeLWl9cBw6iVCYg6E4IMs4HWMhqpHAYSCDVh5sxNZAKn4FsRsQ6YHVgaafqXAvgRaOCLGk9iQ4HeXDmwhminYAy9IsetKS/Ylzt%2BGUmfrgPBggcnQZoTGobfXOMdBgRj4kDF5f0xUsynG6WOQUCywi7Bitg0k%2BP255pljMWylbrNkBFnYyV9UFCskJKh0fLiCIxlr4O7I20EfRP60brrf1wBCq8vHEQrX5wfnjxwvSE8OpURj3NdRx/WgYfwEUPuk8E6gw3MrPbboxZc%2Bity1gjyYMuCSyxVQMr6Ubqlaprl2orlulX2n3oT%2BxjmH4SFcs%2BT3ysaHgsieRE/0NRAzO7N9Ka6HUiRK1bJ%2Bu4qVlvaTEA/hy4vaE/fbUAK7lc8lbfnA0YOL9i8kLdzGIf%2Bem0mk4pT4iVYcZKvNHJGOkL0gfDEGipZldUgQOjCXmmTzAhVfQWAcZbiGAV1HwnvUWfI1VvCgliJOyQuZ0ROHBDhTtoiurBsvtyeyPpKls0A7k76mISHR0DEhzYeWC%2BXf3q9TMeBpDgqiOHctTs1rwCBaQwj1o1lftGv3XXOkPVZpGrM67gCsM3JC%2Bj9PWc66P3/HykuPWf4u%2B7LcNYolc6UjTeyhLWSuq81wZrHlj0vH7YZp6iTGwPdBC4Se6nG4jfGxWaO7H6w8sQembcIT4BUkBMfTYIgSrEJFwLIG1riQ438TANTQ0soVPWI4cXW0B3kW/QSAIID80nSZs6xmQbfNLvKUGBJm7E%2Bb6eM1K9n9Dh2AX10VUDyPGxuIU%2BUFZCfQnmDM2u1gvDeXut6aj99NrpLl7Bhf0zSAtYzFiJrTGRCy9m%2BhlqGMsVYqezopSpSopZj8YgVnEgjZkqGF%2BEmYhj28pTM28JROpdImLuwidnuFErJmlwAQCpNgafjAWI2oGlg3ZwZqxHeNAWqJfGaZYBIlVm1ycaYvcl74GbcnHNQ/M7hsgQgegDBHy6xdK/wD2D2M3eMF0Z%2BdXej0lgldjVmFnc%2BcJ%2BJ7CQiHbdAbccqZJ700TLbIc%2BIDKBRZc8qRaGROP8JhjGDHEXLqDyFcdxlrkdf7oE0wjSfon33LwmNAV93xzbtxmLH10dE84w5KPCcGujMHw6Rs3TcNRUz8Gn/5KhAExb14BXuuQ1RmWZAsMis0SmTWbLjAKWCyUty8g9y%2BL6Nb/SXTDKPG8p9FXjqM5fYOK8sFPiwUSdsl2LyTBB%2BEb3qzAWNq4Ji3ClJpW7a%2B9KmKBZOkiW5mX4fJGbfX3%2BuxbfaOcYYKlsVCOfCTQUvT04CLWDieFMGDPfW4v/vvCNN9KdUM7zHL8FYM3oCt1F40cn67nPkzBptjJi5lrgKM9Ddpn8YlKPX3YdpDjyGEnCE9ISkhVAQiE7/16vz6TLrGlzf9OMA7uXuxsf575uJIubedAYbRf0C/dVwlXJpzXBQUPM%2BcT/Mt8D2DL/s14YdmYlMZCEA9x%2BVoddIpzN1u3egGuFFAqRsvgah3F3LeQS5WgkpvafamA5VC7rbM0ncd3ZqJdIkpCkqF4ar6LGC6bb3ggACQK7YdTbQRkkaw2Nm2o15C1JrtUx2oz2c%2BVAVMLN6YQP1KJoiLLStVqouuq5tJegA8clTD2IbLfgEhJDOGeTHrc3HCPWYI3xrspyrPFD9cQ17fEW494qU9lCJ4wr%2B1ZeXIaO8ll7x3r9%2BkbaIykhe5dBYRaYTqr%2BU1ntN6gquwJzm/wGO0r/T%2BLjncAKgnXd%2BhxtWVkfDgRrlAWWK2i9BaNHC%2BOIrhaTOaLrSUUaA6sH7b6rb0e9ZWDp9srhC7tiKpIKoVK6wgqw9B7qELPIkDY6H5XkJ1HomhXcUpXJZslPjc8emqxVX7eJani9cFvjHrlQ6iQJJs98Ms1Wa6u4LLuaZW/SBFrus8sCjY6m1uWLNSrqKwjUDUfR56gZ8TGU6Ps53EuVvdSBAdbUjMSdXee5sdMBFjSQVdsAY%2BmySFEGymfT2Tg38YSCnpnvfLKtUczcyc5Gi64Uh3vSLaGL2gA3gdAS15kzbcWkNvgwwm7OxfyVLRNsCqjOQEhLdPpkW%2BJkIs8tFLXFITt2ac90j1o/pcawKVci8M5sC8677SEEdf%2BL2jdRXBclA7FcA3XZh90ysLTojFzvpLZl2Ycya0Kzkuf/Y1nqxUhc7HjfmhsbT4ZgeEtcZs9h3lYmcFrvznaaNt%2BaYgJnsppokzN9gWaBZbw0mTBJLEYstY8l6MNhMTeJoRfao7Vml62tkM2TATOfr0GYgdmkScnrehQ2aMTcZY2LviTh9FlDlbAG1jZNoeKT0rPg15thwFKFU5X95pbgijfQCE49Q76xhrNlQWPLdD%2BNMKn3Sjy8zQXzInNhmFBWNs46sWJ%2BFX3OLiRtDguFn8y8sWaHx/18408mQWjCXM0Z6w%2BHJS1OMvaNGvMkobdk1fKaEpP9YF0ILZ0%2BiUEfV3yCVehnd6jTTy2W/YT7Hf42gaWW64zXxF7vtCdVpnMDUV9EWjLiYAacjCWN%2B21B6ouXCi9euY4IkpI6sHuvnxGuEit99lr%2By17nsGWv49euSSWtbPjotImA2YMJTQA5cTW9LgMcbn32EYlEWGxis1Zl4EJZUIokCYnPFsVKq2aBa4s7TaGzEGLTnm7Zx8quZ5IY67fehPMHNp7UlfrJVYGl7chDrUJqFoY9ySM1ublvIS1jOZ3GlwcCImptYuUjQycMKhPPb%2BlPFm609r9XvjZ%2BNOThOlHJFG%2B9mfWBbV3xBJhMBcvuoV6dPCSk%2Bp6oCefp2psU2eItlcoFPkNQu7a8KtQqaQVmWUcnK/zZY/%2BL3h0oM%2Bmc%2BvM6yCn/S/KumRNechEwMH4DV/bBXaPhnXlR4n7%2ByD18hu/mvxsv9DZzxu2yVhBJySQ2rDCSEvQWXCrWXp0UyHmaNW1maJHRtFCEeXQVbLUuFlh5Rmj7prAm0iAgzwUMjLaTWuoHDF0AhrRUUF14HVWnanjwyqt4xE2Ec2RnVkgL6Uxniyl0R8V8qQS7l21/9lLGhqv09JMOZcvDChMfrk9t3PBOFslOAKveHzBfZ1nZmTCZJz2SgWToUt/CBZGU5kpnx1/URs/jC%2BPIn8rTRAh2IYwG%2BtM3NbNNqsbZjU%2B8ibdhrQKsNeXlO0KCmzqyYMRSnVstTXGLwNLp3PG3f81sTpPEoU%2B88mtqdgtYWWGZI%2BourJ6m/6Tls3NYDN9nM3TH30yBxuq2J8D2JDBW7cW7gNLY%2ByjiOX0LjY5jWf1duT7m2bKt9zbeyCzi%2BGQwVgxicjtdBJ3Tl2aVvaYmJd8IPmSw46%2BVE1h5%2Bqi8FXbriX6nji3reX%2BJcr1d2PmczA7yax58op7NC9Knf3myuo8lsOY3j7dV/vaX33eqgYHuAGv7Oe%2BbLv9pyjmC1L/%2B8fizk3wBfWEfpdTN%2BvV7b3gZB1QvbhXO//bhr6he/M5br99//ZiDV2/d%2BuFLR9Y7xzdblZNewDHXW/ktP/T47u2fcMy3nrHlAEsfK9aQP89A7Htno0ZKWYkzZgSBmC6/UNwuKsdKCol//OjhhvQ4srYznPcr7uhNc96Tdphf%2BUOmzQ7X%2BfjuRzF53/nWN1t1//nvOzqrZ6jzV/pV5/lTqebz5Mk8jsWroIxknJ3UWv9XARaT6nTWRNqpbZ18GwWKxuSgFmuT13dQiy9S7pQp1zuLN66%2BoAjqe1Gjzd6OUXBlKj8cnsXWtxx7uzETbHCIAZl6kMwCSOXo2g3asTJeqs36Z0TBZV55fHzbevfuz/ikEQ6ohRffef/%2BvfvUN37%2BNn%2B%2B994DD7wsLdgsB/xJB%2BoGvSxvXM7CsESk9/9vUjpHna9ovJatxCnXRlfn6WCvT3y06KS2MMTJ8WrnADJmRqt0WgWp/eajj5WmIuYnSyklN6qPlbhC8e7MEI1zd9oXAV7g9NfVn1jpCT9Jn%2Bkk1ciccSwfIm2FsmLic/DJ3/9JzQUcO941WYFf1c32LTWSXG%2B4QR/rwQcfRfKP//TJoz885jjIZuCZMpCEKLQwHMi%2BfVUuoBZgpRO0wgTQHE0MTyRTwj1UC7tIz2yEA8/U8lrTqNMglQkGHAqCT44Ljf/yHaXDBc5WLeu%2B%2B7bmtXVmeLZkLJPJ9F12/JWFyZrMI0wLF%2Ba13BR%2BJhdBCUFORlelTzVWftlbKHd/Xxjr3n0xvlD0T3zx8cPkbox/GHpry9iT51zM7dloEFHkTeGG1UNZeQ7Ct07sbG/zTpe8nOgMgroTsFYpeSWOby7Z8ZCvGbnZK5yAtdPAmqV9jk5N22LxscRkZpfHIauHhH0v5gSsXSlmUJ2L7Skjunn/Vt447MtRzKKegDWVVTzCkpJ1eDGvfjRb32f4NmTKJ2A9FcWnhvKWnrwrS4RtYh99AtZTUcqLSU8eAa/fpy17TYw1ldWtoW5W3ouc9yX3vZRlAtZUFhcfi8q/PMlrz/2/hxOwprKWNfTB2sTfh9%2BBPQFrKmOtoU/x5%2BVQG32qYgLW00Va/vcb/z3nRu81AevpKr5tYPi9EhOwprK7ZQLWVCZgTeX8lP8CuDenorrKqfIAAAAASUVORK5CYII%3D">
</div>':
require_once('dompdf/dompdf_config.inc.php');
$dompdf = new DOMPDF ();
$dompdf->load_html ($html);
$dompdf->render ();
$dompdf->stream ("Test.pdf", array ("Attachment" => false));
Get the image from php in base64:
//getIMG.php?data=1&id=123
if ($data == 1) {
echo "data:image/".$adj->type.";base64,"
.str_replace ("\n", "", base64_encode ($adj->imageBinary));
}
For showing the image, you have to go to your dompdf source file like
..dompdf\src\Image\Cache.php
In the Cache.php file, you will search .... and make chrootValid true.. by default it will be false.
$chrootValid = true;
save it and try now...
Hope it will work
Am trying to use text-overflow:ellipsis inside the <td> tag but it supports only to <div> tag.
Any idea to support for <td> tag?
check what am trying to do
http://phpresult.com/source/share/L9F71379328772
I have Found the Solution by using max-width
<style>
.test
{
white-space:nowrap;
text-overflow:ellipsis;
max-width: 100px;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test">
This is the Long text only applied to div tag
</td>
</tr>
</table>
</body>
Add below code...
td {
display: block; /* or inline-block */
}
or
Use
table-layout: fixed;
or give fixed width to your table
I'm trying to center the names(#box2) and the topic(#box1) on top of an image.
<?php require_once('seminar_config.php'); ?>
Print
<body>
<?php
$participants = $db->get_results("SELECT participant FROM tbl_participants WHERE state=1");
$topics = $db->get_results("SELECT topic FROM tbl_topics");
if(!empty($participants)){
?>
<?php ob_start(); ?>
<div id="container">
<img src="certificate.jpg"/>
<?php foreach($topics as $a=>$b){ ?>
<?php foreach($participants as $k=>$v){ ?>
<img src="certificate.jpg"/>
<div id="box1" class="common"><?php echo $b->topic; ?></div>
<div id="box2" class="common"><?php echo $v->participant; ?></div>
<?php } ?>
<?php } ?>
</div>
<?php $_SESSION['certificates'] = ob_get_contents(); ?>
<?php ob_flush(); ?>
<?php } ?>
</body>
And here's the script that creates the pdf:
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML('<style>
#box1{
margin-top: 350px;
}
#box2{
margin-top: 200px;
}
.common{
height: 20px;
left: 630px;
right: 630px;
text-align: center;
position: absolute;
left: 0;
top: 0;
font-size:20px;
}
</style>'.
$_SESSION['certificates']);
$html2pdf->Output('random.pdf');
?>
I have no problem with the center positioning of the names and topic if I'm not using html2pdf to generate pdf files.
But if I use html2pdf everything is ruined. Please help me center things in css when using html2pdf.
Most common HTML-to-PDF programs either don't understand CSS, or understand CSS poorly. If your HTML is working, but doesn't translate well to PDF using html2pdf, you might give wkhtmltopdf a shot https://github.com/antialize/wkhtmltopdf
If you want to center .common try following:
.common{
position: absolute;
left: 50%;
top: 0;
font-size:20px;
width:600px;
margin-left:-300px;
}
Old question, but I had similar problem today. Here is how I was able to solve it after trying every method in the history of html and css to center something. I used a table like JorisW:
<table style='width:100%' align='center'>
<tr>
<td>
<img src="image.gif">
</td>
</tr>
</table>
Here is what I use to position divs in center.
Say you want to position div with id=test
CSS
#test {
width: 500px;
margin: 0 auto; //auto margin to left and right
}
Try using tables and inline css styles
<table align="left" width="100%" style="page-break-after:always; margin-top:25px; margin-left:25px; font-family:tahoma; font-size:20px; ">
<tr><td>Your info</td></tr>
</table>