Я создаю шаблон для электронной почты, основанный на формате таблицы для согласованности.У меня проблемы с двумя элементами стиля.
.productWrap - я не могу отобразить border-bottom, и поле не добавляется. - Я не могу получитьизображение солнца для выравнивания в центре контейнера.Я попытался добавить
text-align: center;margin:0 auto 30px 0;display:block; к <tr> и саму картинку.Ни одна из них не работает.
Кто-нибудь видит, что я делаю неправильно с этими двумя вещами?
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1.4em;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%;
}
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.red {
color: #b82222;
font-weight: bold;
}
p {
font-family: sans-serif;
font-size: 16px;
line-height: 1.4em;
color: #4d4d4d;
}
.bold {
font-weight: bold;
}
.signature {
margin-top: 30px;
font-style: italic;
}
.container {
display: block;
margin: 0 auto !important;
max-width: 580px;
padding: 10px;
width: 580px;
}
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 580px;
padding: 10px;
}
.main {
background: #fff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.footer {
clear: both;
padding-top: 10px;
text-align: center;
width: 100%;
max-width: 580px;
margin: 0 auto;
display: block;
}
.footer td, .footer p, .footer span, .footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* ------- Product Section ------- */
.productWrap {
position: relative;
width: 100%;
height: 250px;
margin: 20px auto;
padding: 10px 0;
border-bottom: 3px solid #CCC;
z-index: 1;
}
.productImgCont {
width: 300px;
height: auto;
}
.productImg {
width: 100%;
height: auto;
}
.productContent {
width: 250px;
padding: 0 10px;
}
.productName {
color: #4d4d4d;
font-family: "Oswald", sans-serif;
font-size: 1.1rem;
}
.productName:after {
content: '';
display: block;
height: 4px;
width: 100px;
background: #1b8c00;
margin-bottom: 10px;
}
.productLink {
color: #1b8c00;
font-family: Verdana;
font-size: .9rem;
text-transform: uppercase;
}
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;max-width:600px;margin:0 auto;">
<tr>
<td class="container">
<div class="content">
<table class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table border="0" cellpadding="0" cellspacing="0">
<tr style="width: 100%;text-align:center;display:block;margin:0 auto 30px auto;">
<td>
<p>
<a href="">
<img src="https://solarsystem.nasa.gov/system/downloadable_items/519_solsticeflare.jpg">
</a>
</p>
</td>
</tr>
<tr>
<td>
<p>Hi John,</p>
<p>Here's your daily mower update</p>
</td>
</tr>
<tr class="productWrap">
<td class="productImgCont">
<img src="https://www.getmowers.com/wp-content/uploads/w2464-1.jpeg" class="productImg" alt="$product_name">
</td>
<td class="productContent">
<p class="productName">60IN JOHN DEERE 1026R SUB-COMPACT UTILITY 4X4 TRACTOR W/ 25HP YANMAR!!</p>
<p class="productCost">$10,500.00</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td> </td>
</tr>
</table>