保持我的块的对齐

Question

我有一张带有单元格的表格，在我的单元格中我有<div> <p>

HTML：

<td data-ng-repeat="price in goHead.prices track by $index">
  <div>
      <p data-ng-if="price.isMinPrice"><img src="images/lemoinscher.png"/></p>
      <p data-ng-if="!price.isMinPrice"></p>
      <p style="font-size:16px;text-align:center;">{{price.price}}</p>

      <p data-ng-if="price.isLastPlace" class="lasptlace"  data-ng-bind-html="'matrice.lastplace' | translate"></p>
      <p data-ng-if="!price.isLastPlace" class="lasptlace"  ></p>
  </div>
</td>

的CSS：

.matrices div p {
    display: table-row-group;
    font-size: 9px;
    text-align: center;
}

.matrices div {
    display: table;
    width: 100%;
}

我的pb就是当我隐藏<p>块时，我的块不再正确对齐，出了什么问题。？

Answer 1

这是由于表格单元格的默认垂直对齐方式补偿了项目的显示被更改，当设置为display:none时，元素不再具有任何尺寸，这将反映在布局上。如果通过更改其显示值来隐藏前面的内容，则表格单元格的默认垂直对齐方式为middle，后续内容将“向上移动”。您可以通过以下方式保持相同的定位：

1. 设置visibility:hidden。
2. 设置opacity:0;而不是
3. 更改/撤消父级单元格的vertical-align值（例如，更改为“底部”，“基线”）
4. 绝对将内容定位在单元格内