Выравнивание ячейки таблицы по центру

Question

Как сделать выравнивание ячейки таблицы по центру по горизонтали?

Подскажите, как выровнять ячейку с классом center_top по центру данной таблицы ? (Можно добавлять классы, но не вынося фразу за пределы синего блока)

.logo_custom {
  padding-left: 50px;
}

.logo_text {
  white-space: nowrap;
  padding-top: 23px;
  padding-right: 50px;
  text-align: right;
  letter-spacing: -0.02em;
  text-decoration-line: underline;
  color: #F5F5F5;
}

.center_top {
  width: 100%;
  align-items: center;
  margin: 0 auto;
}

<table class="body">
  <tr>
    <td class="center" align="center" valign="top">
      <center>
        <table align="center" class="container float-center">
          <tbody>
            <tr>
              <td>
                <table style=" background-color: #386ED9; background-image: url('../assets/img/bg.jpg'); background-position: 50% 50%;
                     background-repeat: no-repeat;  " class="row">
                  <tbody>
                    <tr>

                      <th class="small-6 large-6 columns first">
                        <table>
                          <tbody>
                            <tr>
                              <th>
                                <table class="spacer">
                                  <tbody>
                                    <tr>
                                      <td height="16" style="font-size:16px;line-height:16px;">&nbsp;</td>
                                    </tr>
                                  </tbody>
                                </table>
                                <img class="logo_custom" src="../assets/img/logo.png" width="153" height="35" alt="text">
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                      <th class="small-6 large-6 columns last">
                        <table>
                          <tbody>
                            <tr>
                              <th>
                                <p class="logo_text text-right">View in Browser</p>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                    </tr>
                    <tr>
                      <center>
                        <td class="center_top float-center" align="center">
                          <p class="main_text text-center">Dear Customer,</p>
                          <p class="main_subtext text-center">Thank you for choosing our product, the leading mobile parental control software!</p>
                        </td>
                      </center>

                    </tr>

                  </tbody>
                </table>


                <!-- prevent Gmail on iOS font size manipulation -->
                <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>

Answer 1

Центрировать надо содержимое внешней ячейки (стилями для нормальных клиентов и браузеров, атрибутами ячейки - для антиквариата).

.centerWrapper {
  height: 300px;
  /* чтобы видеть, как по высоте центрируется тоже */
  vertical-align: middle;
  text-align: center;
}

.centerWrapper table {
  display: inline-table;
}

<table style=" background-color: wheat; width:100%;">
  <tr>
    <td class="centerWrapper" align="center" valign="middle">
      <table style=" background-color: #386ED9;">
        <tbody>
          <tr>
            <td class="center_top float-center" align="center">
              <p class="main_text text-center">Dear Customer,</p>
              <p class="main_subtext text-center">Thank you for choosing our product, the leading mobile parental control software!</p>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>

БЛОГ НА HUSL

Выравнивание ячейки таблицы по центру

Ответы (1 шт):