在固定高度图像旁边垂直对齐可变高度文本框

Question

我知道一个非常常见的问题，但是阅读类似的问题仍然很困难。

我在容器div中有两个div（包含高度可变的文本框段落和高度固定的图像），如下所示：

<div class="error-row row">
    <div class="error-value-col">
        <p class="error-value">{{error.message}}</p>
    </div>
    <a class="cross-link">
        <img class="cross" src="/assets/cross.png" alt="close">
    </a>
</div>

随附的LESS文件是：

.error-row {
  border: 1px solid @po-yellow;
  border-width: 0px 1px 1px 1px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: relative;
  margin: 0px;

    .error-value-col {
      float:left;
      vertical-align: middle;
      display: inline-block;
      width: calc(~'100% - 70px');

        .error-value {
          font-size: 10px;
          padding: 5px;

            p {
              margin-bottom: 0px;
            }
        }
    }

    .cross-link {
      padding: 0px;
      float: right;
      vertical-align: middle;
      display: inline-block;
      height: 70px;

        img.cross {
          margin: auto;
          width: 70px;
          height: 70px;
          padding: 28.5px 27.5px 26.5px 27.5px;
          color: black;
        }
    }
}

我尝试了几种不同的设置组合，但似乎没有用。 我希望任何高度最小的元素（在图像和文本框中）都在较高的元素旁边居中。

谢谢大家

编辑：澄清...我希望error-value-col和cross-link以error-row容器为中心。 当然，这将根据两个元素中最大的元素来确定大小。

Answer 1

我更改了方法，并使用display:table和display:table-cell获得所需的行为。 查看此更新的jsFiddle，以查看它是否可以接受（在CSS中转换为LESS）。

除设计规则外，以下与LESS代码相关的新规则是：

.error-row {
  ...
  display:table;
  width:100%;

    .error-value-col {
      ...
      display:table-cell;
      vertical-align:middle;

        .error-value {
          ...

            p {
              ...
            }
        }
    }

    .cross-link {
      ...
      display:table-cell;
      width:70px;
      vertical-align:middle;

        img.cross {
          ...
        }
    }
}

请参考jsFiddle以查看所有差异，包括擦除浮动。

替代品 ：

• 垂直对齐（奇怪地）是CSS中的一个硬主题，至少在您不想使用相对较新的Flexbox模型的情况下。
• 通常，一种非常常见的方法是将内部DIV绝对定位为top:50%但由于参考点位于左上角，因此您必须将其DIV推高至其“ 一半高度 ”，并使其负数margin-top 。 这就要求内部DIV具有固定的高度，以便将此负边距设置为一半。