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

我知道这是一个很常见的问题，但读过类似的问题后，我仍在苦苦挣扎

容器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>

我尝试了几种不同的设置组合，但似乎都不起作用。我希望具有最小高度的元素（在图像和文本框外）与较高的元素一起居中

谢谢大家

---

编辑：澄清…我希望

错误值列

和

交叉链接

集中在

错误行

容器上。当然，这将被调整为两个元素中最大的元素，可以是其中之一。

我改变了方法，并使用

显示：表格

和

显示：表格单元格

来获得所需的行为。看看这个，看看你是否可以接受（在CSS中转换的更少）

除设计规则外，与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 {
          ...
        }
    }
}

请参阅以查看所有差异，包括浮动的擦除

备选方案：

• 垂直对齐（奇怪地）是CSS中的一个难题，至少如果 您不想使用相对较新的模型
• 一般来说，一种非常常用的方法是绝对定位内部DIV 顶部：50%但由于参考点位于左上方 在拐角处，然后你必须用一只手把它推到“它高度的一半” 负

  页边距顶部

  。这需要有一个固定的内部高度 DIV，以便将此负边距设置为它的一半

---

如果您提供一个提琴，会很有帮助。是否希望

。错误值将垂直居中于
。错误值列
？
.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 {
          ...
        }
    }
}