Вертикально выровнять текстовое поле переменной высоты рядом с фиксированной высотой image

Question

очень распространенный вопрос. Я знаю, но я все еще боюсь, прочитав подобные вопросы.

У меня есть две дивы (содержащие текст окна пункт переменной высоты и фиксированную высоту изображения) внутри контейнера 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> 

Сопровождающий МЕНЬШЕ файл:

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

Я пробовал несколько разных комбинаций настроек, но никто не работает. Я хочу, чтобы элемент с наименьшей высотой (из изображения и текстового поля) располагался рядом с более высоким элементом.

Спасибо всем.

EDIT: Уточнение ... Я хочу, чтобы error-value-col и cross-link были центрированы на контейнере error-row. Разумеется, это будет размер самого большого элемента из двух, что также может быть.

Answer 1

Я изменил подход и использовал display:table и display:table-cell для получения желаемого поведения. Посмотрите на это updated jsFiddle, чтобы узнать, приемлемо ли это для вас (конвертируется LESS в CSS там).

Apart правила проектирования, соответствующие новые для МЕНЬШЕ кода являются следующие:

.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, чтобы установить этот отрицательный запас на половину.