Html 垂直对齐未知高度的浮动图元

我想创建一个包含两列的标题，一列用于“品牌名称”，另一列用于按钮，如登录、注册等

然而，我不知道如何在标题中垂直居中，因为按钮比品牌名称高很多

我也已经无意中发现了，但是解决方案表明这并没有解决我的问题

到目前为止我所得到的：

标题{
边框：1px点品红；
}
标题：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
#左{
背景色：#cfc；
浮动：左；
垂直对齐：中间对齐；
}
#对{
背景色：#ccf；
浮动：对；
垂直对齐：中间对齐；
}
钮扣{
填充：8px 10px；
}

我的品牌名称
按钮1
按钮2
按钮3

您可以使用Flexbox执行此操作，您只需使用

标题上的
对齐项目：居中进行垂直对齐即可


标题{
边框：1px点品红；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
#左{
背景色：#cfc；
}
#对{
背景色：#ccf；
}
钮扣{
填充：8px 10px；
}

我的品牌名称
按钮1
按钮2
按钮3
还有两个解决方案可以实现这一点：

变体1带表格，适用于IE 6+
标题{
边框：1px点品红；
显示：表格；
宽度：100%；
}
标题：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
#左{
显示：表格单元格；
垂直对齐：中间对齐；
}
#对{
背景色：#ccf；
浮动：对；
垂直对齐：中间对齐；
}
钮扣{
填充：8px 10px；
}

我的品牌名称
按钮1
按钮2
按钮3