在固定高度圖像旁邊垂直對齊可變高度文本框

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具有固定的高度，以便將此負邊距設置為一半。