содержание Центр инлайн-блочных элементов Div

Question

Я пытаюсь сделать что-то вроде этого в CSS/HTML:

Каждая «коробка» должна быть ссылка на детали ошибки. Текст и красный div внутри коробки должны быть расположены по горизонтали, как показано на изображении.

Вот мой код: JSFiddle

.outerDiv { 
    display: inline-block; 
    border-radius: 10px; 
    border: 2px solid #c3c3c3; 
    height: 100px; 
    width: 100px; 
    margin: 5px; 
} 

.innerDiv { 
    width: 50%; 
    height: 100%; 
    margin: 0 auto; 
} 

.errorLabel {  
    background-color: #a90329; 
    display: inline; 
    padding: .2em .6em .3em; 
    font-size: 75%; 
    color: #fff; 
    border-radius: .25em; 
    line-height: 1; 
    vertical-align: baseline; 
    font-weight: 700; 
    text-align: center; 
    white-space: nowrap; 
    box-sizing: border-box; 
} 

Edit: После ответа Fabrizio Calderan

Если обнаружены два небольших вопроса.

• Когда текст ярлыка очень короткий, он отображается в той же строке, что и текст.
• Когда текст ярлыка очень длинный или содержит разрыв строки, ярлык выглядит не очень хорошо.

New JsFiddle

я был в состоянии исправить первый номер поворота метки в блоке элемент. Теперь я ищу способ убедиться, что все ярлыки имеют одинаковое пространство для нижней границы. (Это должно выглядеть как на картинке, а не так, как на скрипке)

Answer 1

Я нашел решение моей проблемы: JsFiddle

.outerDiv { 
    text-align: center; 
    float: left; 
    border-radius: 10px; 
    border: 2px solid #c3c3c3; 
    height: 100px; 
    width: 100px; 
    margin: 5px; 
    line-height: 50px; 
} 

.errorLabel { 
    display:inline-block; 
    vertical-align: bottom; 
    margin-bottom:7px; 
    width:84%; 
    background-color: #a90329; 
    padding: .2em .6em .3em; 
    color: #fff; 
    border-radius: .25em; 
    line-height: 1; 
    font-weight: 700; 
    white-space: nowrap; 
    box-sizing: border-box; 
} 

Answer 2

добавить высоту строки к внутренней DIV, например, line-height: 50px; и text-align: center к наружному DIV

http://jsfiddle.net/2mxud8uk/3/

.outerDiv { 
    text-align: center; 
    ... 
} 

.innerDiv { 
    line-height: 50px; 
    width: 50%; 
    ... 
} 

---

Результат