Html 内联块div元素的中心内容

我尝试在CSS/HTML中执行类似的操作：

每个“框”都应该是指向错误详细信息的链接。 文本和框内的红色div应水平居中，如图所示

这是我的密码：

编辑： 在…的回答之后

如果检测到两个小问题

• 当标签的文本非常短时，它将显示在与文本相同的行上
• 当标签的文本很长或包含换行符时，标签看起来不太好

我能够通过将标签转换为块元素来解决第一个问题。 现在，我正在寻找一种方法，以确保所有标签的底部边框具有相同的空间。 （它应该看起来像图像，而不是小提琴）

---

在内部div中添加行高，例如

行高：50px和
文本对齐：居中到外部div



结果

我找到了解决问题的方法：

酷，我怎么能水平居中的标签？啊，更新后，一切都很好地居中。非常感谢您的帮助。@musium如果它是完美的，那么请努力将其标记为已适应D@GaneshSalunkhe我会接受这是正确的解决方案…1分钟后（stackoverflow不会让我接受）@Fabrizio Calderan我在你的解决方案中发现了两个小问题，但无法解决。你能看一下吗？详情见原问题。
.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;
}

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

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

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