css - 垂直对齐每个单元格的文本

Question

我想知道是否存在将文本设置在同一行或同一级别的技术，因为我所做的是为我的前两个 block 添加行高，但如果我添加一行 -其他人的高度仍然存在差异。它看起来很奇怪，因为我的标题在每个单元格中都不相同。

$(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();

    $(this).closest('table').find('[class^="cat"]').toggle();
  });
});

a {
  color: #002642;
}

.center {
  text-align: center;
}

.toggler,
.cat1 {
  font-family: 'Varela Round';
  color: white;
}

td {
  display: block;
  width: auto;
  border: 1px dotted #c4a77d;
  background-color: #c4a77d;
  color: white;
  margin-bottom: 10px;
}

@media only screen and (min-width: 70em) {
  td {
    display: table-cell;
    border: 1px dotted #c4a77d;
    background-color: #c4a77d;
    color: white;
    margin-bottom: 0px;
  }
}

p {
  font-family: 'Varela Round';
  font-weight: bold;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>
        <table width="100%" class="center">
          <tr>
            <td style="line-height:100px;">
              <p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
            </td>
          </tr>
          <tr>
            <td><a href="#" class="toggler" data-prod-cat="1">+ En savoir plus</a></td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>Part CAC 40 : 90</td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>Part Filiales +100M€: 120</td>
          </tr>
        </table>
      </td>
      <td>
        <table width="100%" class="center">
          <tr>
            <td style="line-height:100px;">
              <p style="vertical-align:middle;">CONTACTS : 16 700</p>
            </td>
          </tr>
          <tr>
            <td><a href="#" class="toggler" data-prod-cat="1">+ En savoir plus</a></td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>Part CAC 40 : 10 000 </td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>Part Filiales +100M€: 6 700</td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>% contacts IT: 21%</td>
          </tr>
        </table>
      </td>
      <td>
        <p>EMAIL NOMINATIFS: 16 700</p>
      </td>
      <td>
        <p>OPT OUT: 3%</p>
      </td>
      <td>
        <p>LIGNES DIRECTES: 35%</p>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您所需要的只是表格单元格上的vertical-align:baseline。 td 元素默认有 vertical-align:middle。

$(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();

    $(this).closest('table').find('[class^="cat"]').toggle();
  });
});

a {
  color: #002642;
}

.center {
  text-align: center;
}

.toggler,
.cat1 {
  font-family: 'Varela Round';
  color: white;
}

td {
  display: block;
  width: auto;
  border: 1px dotted #c4a77d;
  background-color: #c4a77d;
  color: white;
  margin-bottom: 10px;
  vertical-align:baseline;
}

@media only screen and (min-width: 70em) {
  td {
    display: table-cell;
    border: 1px dotted #c4a77d;
    background-color: #c4a77d;
    color: white;
    margin-bottom: 0px;
  }
}

p {
  font-family: 'Varela Round';
  font-weight: bold;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>
        <table width="100%" class="center">
          <tr>
            <td style="line-height:100px;">
              <p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
            </td>
          </tr>
          <tr>
            <td><a href="#" class="toggler" data-prod-cat="1">+ En savoir plus</a></td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>Part CAC 40 : 90</td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>Part Filiales +100M€: 120</td>
          </tr>
        </table>
      </td>
      <td>
        <table width="100%" class="center">
          <tr>
            <td style="line-height:100px;">
              <p style="vertical-align:middle;">CONTACTS : 16 700</p>
            </td>
          </tr>
          <tr>
            <td><a href="#" class="toggler" data-prod-cat="1">+ En savoir plus</a></td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>Part CAC 40 : 10 000 </td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>Part Filiales +100M€: 6 700</td>
          </tr>
          <tr class="cat1" style="display:none">
            <td>% contacts IT: 21%</td>
          </tr>
        </table>
      </td>
      <td>
        <p>EMAIL NOMINATIFS: 16 700</p>
      </td>
      <td>
        <p>OPT OUT: 3%</p>
      </td>
      <td>
        <p>LIGNES DIRECTES: 35%</p>
      </td>
    </tr>
  </tbody>
</table>