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

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;
        }
    }
}

我尝试了几种不同的设置组合，但 none 似乎有效。我希望高度最小的元素（在图像和文本框之外）与较高的元素并排居中。

谢谢大家。

编辑：澄清...我希望 error-value-col 和 cross-link 以 error-row 容器为中心。这当然会调整为两者中最大的元素，这可能是两者之一。

Answer 1

我改变了方法并使用 display:table 和 display:table-cell 来获得所需的行为。看看这个 updated 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% 但由于参考点在左上角角，那么你必须用一个否定 margin-top。这需要有一个固定的内部高度 DIV，为了将这个负边距设置为它的一半。

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

Vertically align a varible height text box next to a fixed height image

html

css

vertical-alignment

less