Question

大家好我只需要你的帮助，我无法将图像放到两个桌子的中心位置。在这里我到目前为止所拥有的。请参阅照片以供参考。第一张照片是我需要获得的，而第二张照片是我获得的。

＆＃13;

/* Basics */

body {
  margin: 0 !important;
  padding: 0;
}

table {
  border-spacing: 0;
  font-family: sans-serif;
  color: #333333;
}

td {
  padding: 0;
}

img {
  border: 0;
}

div[style*="margin: 16px 0"] {
  margin: 0 !important;
}

.wrapper {
  width: 100%;
  table-layout: fixed;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background-color: rgb(95, 89, 89);
}

.webkit {
  max-width: 600px;
  margin: 0 auto;
  background-color: white;
}

.outer {
  Margin: 0 auto;
  width: 100%;
  max-width: 600px;
}

.full-width-image img {
  width: 100%;
  max-width: 600px;
  height: auto;
}

.inner {
  padding: 20px;
}

.inner-footer {
  padding-left: 24px;
  padding-bottom: 10px;
}

p {
  margin: 0;
  font-family: unset;
}

a {
  color: #ee6a56;
  text-decoration: underline;
}

.h1 {
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 18px;
}

.h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}


/* One column layout */

.one-column .contents {
  /*text-align: left;*/
}

.one-column p {
  font-size: 14px;
  margin-bottom: 10px;
}


/*Two column layout*/

.two-column {
  text-align: center;
  font-size: 0;
}

.two-column .column {
  width: 100%;
  max-width: 300px;
  display: inline-block;
  vertical-align: top;
}

.contents {
  width: 100%;
  text-align: justify;
}

.two-column .contents {
  font-size: 14px;
  /*text-align: left;*/
}

.two-column img {
  width: 100%;
  max-width: 280px;
  height: auto;
}

.two-column .text {
  padding-top: 10px;
}


/*Three column layout*/

.three-column {
  text-align: center;
  font-size: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.three-column .column {
  width: 100%;
  max-width: 200px;
  display: inline-block;
  vertical-align: top;
}

.three-column .contents {
  font-size: 14px;
  text-align: center;
}

.three-column img {
  width: 100%;
  max-width: 180px;
  height: auto;
}

.three-column .text {
  padding-top: 10px;
}


/* Left sidebar layout */

.left-sidebar {
  text-align: center;
  font-size: 0;
}

.left-sidebar .column {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.left-sidebar .left {
  max-width: 100px;
}

.left-sidebar .right {
  max-width: 500px;
}

.left-sidebar .img {
  width: 100%;
  max-width: 80px;
  height: auto;
}

.left-sidebar .contents {
  font-size: 14px;
  text-align: center;
}

.left-sidebar a {
  color: #85ab70;
}


/* Right sidebar layout */

.right-sidebar {
  text-align: center;
  font-size: 0;
}

.right-sidebar .column {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.right-sidebar .left {
  max-width: 100px;
}

.right-sidebar .right {
  max-width: 500px;
}

.right-sidebar .img {
  width: 100%;
  max-width: 80px;
  height: auto;
}

.right-sidebar .contents {
  font-size: 14px;
  text-align: center;
}

.right-sidebar a {
  color: #70bbd9;
}


/*Media Queries*/

@media screen and (max-width: 400px) {
  .two-column .column,
  .three-column .column {
    max-width: 100% !important;
  }
  .two-column img {
    max-width: 100% !important;
  }
  .three-column img {
    max-width: 50% !important;
  }
}

@media screen and (min-width: 401px) and (max-width: 620px) {
  .three-column .column {
    max-width: 33% !important;
  }
  .two-column .column {
    max-width: 50% !important;
  }
}

.red-text {
  color: red;
}

.white-text {
  color: white;
}

a {
  color: blue;
}

.social-media {
  padding-right: 15px;
}

.img-space {
  padding-left: 5px;
}

.orange-text {
  color: #f5a123;
}

.package-box {
  padding: 15px;
}

.phone-numbers {
  color: white;
  font-size: 12px;
}

＆＃13;

]
<center class="wrapper">
  <div class="webkit">
    <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center">
            <tr>
            <td>
            <![endif]-->
    <table>
      <tr style="background-image:url(https://...../assets/admin/images/step2camp/banner-bg-withcolor.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;">
        <td class="one-column">
          <div class="column">
            <table width="100%">
              <tr>
                <td class='inner contents' style="height: 60px;">
                  <center><img src="https://..../assets/admin/images/descamp/images/logo.png" style="width: 30%;float: left;" alt="" /></center>
                  <p style="color: white;float: right;text-align: right;padding-top: 12px;">
                    Phone Australia: +612-8488-8240<br \>Phone United Kingdom: +44-203-318-1017
                  </p>
                </td>
              </tr>
              <tr>
                <td class='inner contents' style="text-align: center;">
                  <p style="font-size:16px;color:white;">GET A NEW WEBSITE THIS WEEK</p>
                  <p style="font-size:28px;color:#afd415;">SAVE $400</p>
                </td>
              </tr>
              <tr>
                <td class='inner contents' style="text-align: center;padding-bottom: 0px;">
                  <img src="https://..../assets/admin/images/step2camp/laptop.png" alt="" style="width:300px;height:200px;" />
                </td>
              </tr>

            </table>
          </div>
        </td>
      </tr>
      <tr style="background-color:#fff;">
        <td class="one-column">
          <div class="column">
            <table width="100%">
              <tr>
                <td style="height:100px;">

                </td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>
  </div>
</center>

＆＃13;

我制作了一个电子邮件html模块，所以我需要使用表格进行格式化。希望有人可以帮助我 - 干杯

从表格行中心图像

0 个答案: