'How to add specified alignment to an image?
So, I would like to have the image in the footer of this template be aligned more with the text above it that reads, TRACKING # EP. How do I set the margins for this?
<table class="label">
<tr>
<td class="sign">F</td>
<td class="holder">
<div class="flexbox">
<div class="internet-base">
Internert Base
</div>
<div class="box">
FIRST-CLASS<br />
ePostage<br />
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="title">FIRST-CLASS</td>
</tr>
<tr>
<td colspan="2" class="row">
<p class="sender">
{{fromName}}
<br />
{{refNumber}} <br />
</p>
<p class="meta">
Email Date: {{labelDate}}
<br />
Memory: {{emailWeight}} kb
</p>
</td>
</tr>
<tr>
<td colspan="2" class="receiver">
<!-- <p class="signature">SIGNATURE WAIVED</p> -->
<p class="to" style="padding-top: 10px">
{{toName}}
<br />
{{toRefNumber}}<br />
</p>
</td>
</tr>
<tr>
<td colspan="2" class="barcode">
<p class="note">TRACKING # EP</p>
<img src="data:image/png;base64, {{barImage}}" alt="" class="img" />
</td>
</tr>
<tr>
<td colspan="2" class="footer"><img src="https://cdn.suwalls.com/wallpapers/vector/sad-panda-hidden-in-the-white-background-47723-2880x1800.jpg" width="93" height="29"> </td>
</tr>
</table>
<style>
@import url("http://fonts.cdnfonts.com/css/helvetica-neue-9");
@page {
margin: 0px;
}
body {
margin: 0px;
}
* {
font-family: "Helvetica Neue", sans-serif;
}
p {
margin-top: 0;
margin-bottom: 5px;
}
.label {
width: 600px;
border: 2px solid black;
border-collapse: collapse;
font-weight: bold;
}
.sign {
font-size: 140px;
margin: 0;
border: 2px solid black;
width: 160px;
padding-top: 20px;
text-align: center;
font-weight: bold;
}
.title {
text-align: center;
font-size: 37px;
border: 2px solid black;
padding-top: 12px;
padding-bottom: 2px;
}
.barcode {
border: 2px solid black;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
border-top: 4px solid black;
border-bottom: 4px solid black;
}
.img {
width: 70%;
}
.footer {
height: 50px;
min-height: 50px;
}
.row {
height: 150px;
min-height: 150px;
vertical-align: top;
}
.signature {
font-size: 18px;
padding-left: 9px;
padding-bottom: 10px;
}
.meta {
text-align: right;
float: right;
padding-top: 9px;
padding-right: 9px;
font-size: 18px;
}
.sender {
text-align: left;
float: left;
padding-top: 9px;
padding-left: 9px;
font-size: 18px;
line-height: initial;
}
.to {
padding-left: 40px;
padding-top: 20px;
font-size: 18px;
}
.receiver {
font-size: 18px;
vertical-align: top;
padding-top: 60px;
padding-bottom: 60px;
}
.box {
border: 2px solid black;
text-align: center;
padding: 5px;
width: 130px;
font-size: 13px;
float: right;
margin-right: 50px;
}
.holder {
vertical-align: middle;
display: table-cell;
}
.note {
font-size: 17px;
padding-bottom: 10px;
}
.flexbox {
display: flex;
align-items: center;
}
.internet-base {
margin-left: auto;
margin-right: 10px;
}
</style>Solution 1:[1]
Try this:
<table class="label">
<tr>
<td class="sign">F</td>
<td class="holder">
<div class="flexbox">
<div class="internet-base">
Internert Base
</div>
<div class="box">
FIRST-CLASS<br />
ePostage<br />
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="title">FIRST-CLASS</td>
</tr>
<tr>
<td colspan="2" class="row">
<p class="sender">
{{fromName}}
<br />
{{refNumber}} <br />
</p>
<p class="meta">
Email Date: {{labelDate}}
<br />
Memory: {{emailWeight}} kb
</p>
</td>
</tr>
<tr>
<td colspan="2" class="receiver">
<!-- <p class="signature">SIGNATURE WAIVED</p> -->
<p class="to" style="padding-top: 10px">
{{toName}}
<br />
{{toRefNumber}}<br />
</p>
</td>
</tr>
<tr>
<td colspan="2" class="barcode">
<p class="note">TRACKING # EP</p>
<img src="data:image/png;base64, {{barImage}}" alt="" class="img" />
</td>
</tr>
<tr>
<td colspan="2" class="footer"><img src="https://cdn.suwalls.com/wallpapers/vector/sad-panda-hidden-in-the-white-background-47723-2880x1800.jpg" width="93" height="29"> </td>
</tr>
</table>
<style>
@import url("http://fonts.cdnfonts.com/css/helvetica-neue-9");
@page {
margin: 0px;
}
body {
margin: 0px;
}
* {
font-family: "Helvetica Neue", sans-serif;
}
p {
margin-top: 0;
margin-bottom: 5px;
}
.label {
width: 600px;
border: 2px solid black;
border-collapse: collapse;
font-weight: bold;
}
.sign {
font-size: 140px;
margin: 0;
border: 2px solid black;
width: 160px;
padding-top: 20px;
text-align: center;
font-weight: bold;
}
.title {
text-align: center;
font-size: 37px;
border: 2px solid black;
padding-top: 12px;
padding-bottom: 2px;
}
.barcode {
border: 2px solid black;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
border-top: 4px solid black;
border-bottom: 4px solid black;
}
.img {
width: 70%;
}
.footer {
height: 50px;
min-height: 50px;
}
.row {
height: 150px;
min-height: 150px;
vertical-align: top;
}
.signature {
font-size: 18px;
padding-left: 9px;
padding-bottom: 10px;
}
.meta {
text-align: right;
float: right;
padding-top: 9px;
padding-right: 9px;
font-size: 18px;
}
.sender {
text-align: left;
float: left;
padding-top: 9px;
padding-left: 9px;
font-size: 18px;
line-height: initial;
}
.to {
padding-left: 40px;
padding-top: 20px;
font-size: 18px;
}
.receiver {
font-size: 18px;
vertical-align: top;
padding-top: 60px;
padding-bottom: 60px;
}
.box {
border: 2px solid black;
text-align: center;
padding: 5px;
width: 130px;
font-size: 13px;
float: right;
margin-right: 50px;
}
.holder {
vertical-align: middle;
display: table-cell;
}
.note {
font-size: 17px;
padding-bottom: 10px;
}
.flexbox {
display: flex;
align-items: center;
}
.internet-base {
margin-left: auto;
margin-right: 10px;
}
/* New */
.footer {
text-align: center;
}
.footer img {
margin-right: 45px;
}
</style>Solution 2:[2]
Add this line of code or property to the img td
.footer img{
margin-left:45%;
}
Adjust the percentage value according to your requirement. Also you can use (px) instead of percentage.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Joao Daniel |
| Solution 2 |