麻烦垂直居中父div内的div与未设置的高度

Question

编辑：我知道这个问题似乎与以前的问题重复，但我已经尝试了我找到的旧问题的所有答案，但在我的案例中都没有。

我有一个小部件，显示一个链接列表，每个链接旁边都有一个图像。图像是基于链接的类动态生成的，因此每个图像都是不同的，因此具有不同的高度。结构是这样的，我有一个称为包装器的外部div，并且每个包装器内部是带有图像的div和带有链接的div，向左浮动，以便链接出现在图像旁边。

我为每个div添加了彩色边框，以便您可以轻松地看到它们。

我需要将链接div（带有蓝色边框的链接）垂直居中，以使其相对于图像居中而不是与顶部对齐。这是我的代码：

<li class="@item.Category"><div class="wrapper"><div class="imgBox"><img src="@imgSrc"/></div><div class="linkBox"><a href="@item.Link.NavigateUrl"> @item.Link.Text</a> </div></div></li>

和css：

}
.wrapper {
    width: 100%;
    display: inline-block;
    border: 1px solid green;
}
.imgBox {
    width: 55px;
    float: left;
    border: 1px solid red;
}
.imgBox > img {
    display: block;
    margin: 0 auto;
}
.linkBox {
    float: left;
    border: 1px solid blue;
    display: block;
    margin-bottom: auto;
}

我尝试过多种方法让linkBox垂直居中，但我无法解决任何问题。因为包装器没有设置高度，所以将linkBox的高度设置为100％不起作用。我也尝试过margin-top：50％，但似乎将其设置为最外层div的50％（高400px），我认为因为包装器没有设定高度。

我也试过这个解决方案：

.wrapper {
    display: table-cell;
    vertical-align: middle;
}

.linkBox {
    margin-left: auto;
    margin-right: auto; 
    width: 100%;
}

但这也没有奏效。