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来获得所需的行为。看看这个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%，但由于参考点位于左上角角落，然后你必须推高它的高度的一半＆＃34;用一个否定margin-top。这需要具有固定的内部高度 DIV，为了将这个负边距设置为它的一半。

垂直对齐固定高度图像

1 个答案: