Контент не выравнивается по центру - PullRequest
Новая
       9

Контент не выравнивается по центру

0 голосов
/ 24 мая 2018

это мой первый пост здесь.У меня проблемы с этим письмом, которое я пытаюсь разработать.Все выглядит хорошо, пока вы не развернетесь на весь экран.При расширении во весь экран часть содержимого оказывается рядом друг с другом.Пожалуйста помоги.Спасибо.

.footer {
  width: 600px;
  background-color: #262626;
  text-align: center;
  font-family: verdana;
  text-decoration: none;
}

@media only screen and (max-width: 480px) {
  img {
    max-width: 100% !important;
  }
  .footer {
    max-width: 100% !important;
  }
}
<center>
  <table>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner"><img src="https://i.imgur.com/PDjptBG.jpg"></a>
    </tr>
    <tr>
      <img src="https://i.imgur.com/hQ742x0.jpg">
    </tr>
    <tr>
      <img src="https://i.imgur.com/Tp7E0YJ.jpg">
    </tr>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner"><img src="https://i.imgur.com/jGkDOCo.jpg"></a>
    </tr>
    <tr>
      <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle"><img src="https://i.imgur.com/ZO8mC30.jpg"></a>
    </tr>
    <div class="footer">
      <img style="padding-top:20px;" src="https://i.imgur.com/CShaFcV.png">
      <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
      <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
      <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" style="font-size:11px; color: #545454;">Privacy</a>
      <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" style="font-size:11px; color: #545454;">Unsubscribe</a>
      <br>
      <br>
    </div>
    </tr>
  </table>
</center>

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Так же, как @showdev сказал.Ваша проблема заключалась в том, что не было элементов <td>.

<!DOCTYPE html>

<head>
    <style type="text/css">
        .footer {
            width: 600px;
            background-color: #262626;
            text-align: center;
            font-family: verdana;
            text-decoration: none;
        }

        @media only screen and (max-width: 480px) {
            img {
                max-width: 100% !important;
            }
            .footer {
                max-width: 100% !important;
            }
        }
    </style>
</head>
<html>

<body>
    <center>
        <table>
            <tr>
                <td>

                    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner">
                        <img src="https://i.imgur.com/PDjptBG.jpg">
                    </a>
                </td>
            </tr>
            <tr>
                <td>

                    <img src="https://i.imgur.com/hQ742x0.jpg">
                </td>
            </tr>
            <tr>
                <td>

                    <img src="https://i.imgur.com/Tp7E0YJ.jpg">
                </td>
            </tr>
            <tr>
                <td>

                    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner">
                        <img src="https://i.imgur.com/jGkDOCo.jpg">
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle">
                        <img src="https://i.imgur.com/ZO8mC30.jpg">
                    </a>
                </td>

            </tr>
            <tr>
                <td>

                    <div class="footer">
                        <img style="padding-top:20px;" src="https://i.imgur.com/CShaFcV.png">
                        <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
                        <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
                        <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" style="font-size:11px; color: #545454;">Privacy</a>
                        <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" style="font-size:11px; color: #545454;">Unsubscribe</a>
                        <br>
                        <br>
                    </div>

                </td>
            </tr>
        </table>
    </center>
</body>

</html>
0 голосов
/ 24 мая 2018

Ваш HTML-код немного бедствия.Для начала на вашем столе не хватает <td> клеток.Вам нужен один для каждой строки таблицы.Вы не можете начать ряд и использовать <div>.Они не смешиваются.

Вашему столу нужна width, чтобы предотвратить его распространение.Я добавил width="600", потому что это хорошая ширина для электронной почты.

Ваши изображения будут вести себя лучше, если вы добавите display: block; к встроенному стилю.Кроме того, вы также можете добавить закрывающую косую черту />.

Воспользуйтесь приведенным ниже html-кодом, который решит большинство проблем, с которыми вы столкнулись.

Удачи. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Content not aligning in center</title>
  <style>
    .footer {
      width: 600px;
      background-color: #262626;
      text-align: center;
      font-family: verdana;
      text-decoration: none;
    }

    @media only screen and (max-width: 480px) {
      img {
        max-width: 100% !important;
     }
     .footer {
       max-width: 100% !important;
     }
   }
  </style>
</head>
<body>
<center>
<table width="600">
  <tr>
    <td>
      <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/PDjptBG.jpg" style="display:block;" /></a>
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/hQ742x0.jpg" style="display:block;" />
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/Tp7E0YJ.jpg" style="display:block;" />
   </td>
</tr>
<tr>
  <td>
    <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/jGkDOCo.jpg" style="display:block;" /></a>
  </td>
</tr>
<tr>
  <td>
    <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle target="_blank"><img src="https://i.imgur.com/ZO8mC30.jpg" style="display:block;" /></a></td>
</tr>
<tr>
<td class="footer">
  <img style="padding-top:20px; display:block;" src="https://i.imgur.com/CShaFcV.png" />
  <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
  <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
  <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" target="_blank" style="font-size:11px; color: #545454;">Privacy</a>
  <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" target="_blank" style="font-size:11px; color: #545454;">Unsubscribe</a>
  <br>
  <br>
  </td>
  </tr>
</table>
</center>
</body>
</html>
0 голосов
/ 24 мая 2018

Браузер не отображает вашу таблицу (потому что у вас нет элементов <td>).

Обновление Чтобы сделать его полностью отзывчивым, вы можете использовать ширину таблицы 100%.Вам также понадобится margin:0 auto; для тега img: 

.footer {
  width: 600px;
  background-color: #262626;
  text-align: center;
  font-family: verdana;
  text-decoration: none;
}

img {
  margin: 0 auto;
}

@media only screen and (max-width: 600px) {
  img {
    max-width: 100% !important;
  }
  .footer {
    max-width: 100% !important;
  }
}
<center>
  <table width="100%" cellpadding="0" style="border-collapse: collapse;">
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/PDjptBG.jpg" style="display:block;" /></a>
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://i.imgur.com/hQ742x0.jpg" style="display:block;" />
      </td>
    </tr>
    <tr>
      <td>
        <img src="https://i.imgur.com/Tp7E0YJ.jpg" style="display:block;" />
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/conditioner" target="_blank"><img src="https://i.imgur.com/jGkDOCo.jpg" style="display:block;" /></a>
      </td>
    </tr>
    <tr>
      <td>
        <a href="https://www.dollarshaveclub.com/our-products/clean/shampoo-and-conditioner-bundle" target="_blank"><img src="https://i.imgur.com/ZO8mC30.jpg" style="display:block;" /></a></td>
    </tr>
    <tr>
      <td class="footer">
        <img style="padding-top:20px; display:block;" src="https://i.imgur.com/CShaFcV.png" />
        <p style="font-size:13px; color:#9c9c9c;">2018 Dollar Shave Club. All Rights Reserved.</p>
        <p style="font-size:11px; color:#757575;">13335 Maxella Ave. Marina Del Rey, CA 90292</p>
        <a href="https://help.dollarshaveclub.com/hc/en-us/articles/115004873807-Privacy-Policy" target="_blank" style="font-size:11px; color: #545454;">Privacy</a>
        <a href="https://help.dollarshaveclub.com/hc/en-us/sections/115001914007-Membership-Settings" target="_blank" style="font-size:11px; color: #545454;">Unsubscribe</a>
        <br>
        <br>
      </td>
    </tr>
  </table>
</center>
...