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

Question

very common question I know, but I'm still struggling having read similar questions.

I have two divs (containing a variable height text box paragraph and a fixed height image) within a container div, as follows:

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

The accompanying LESS file is:

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

I've tried several different combinations of settings but none seem to work. I want whatever the element with the smallest height is (out of the image and text box) to centre alongside the taller element.

Thanks all.

EDIT: Clarification...I want the error-value-col and cross-link to be centred on the error-row container. This will of course be sized to the largest element out of the two, which could be either.

Answer 1

I changed approach and use display:table and display:table-cell to obtain desired behaviour. Look at this updated jsFiddle to see if it's acceptable for you (converted LESS in CSS there).

Apart design rules, relevant new ones to LESS code are the following:

.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 {
          ...
        }
    }
}

Please refer to jsFiddle to see all differences including erasing of floating.

ALTERNATIVES :

• Vertical aligning is (strangely) an hard topic in CSS, at least if you don't want to use relatively new Flexbox model.
• Generally a very common method is to absolute positioning inner DIV with top:50% but due to fact that reference point is top-left corner, then you have to push up it of " half of its height " with a negative margin-top . This requires to have a fixed height of inner DIV, in order to set this negative margin to half of it.