如何使标题垂直对齐具有不同标题长度的中心？答案

【问题标题】：How to make title vertical align center with different title length?如何使标题垂直对齐具有不同标题长度的中心？
【发布时间】：2017-02-24 12:48:03
【问题描述】：

我想用垂直对齐中心制作如下图：

我该如何实现？

【问题讨论】：

您应该提供一些代码来展示您当前的解决方案...
分享你的代码...
基本上，你不能。没有得到良好支持的 CSS 机制可以均衡不共享父元素的高度。在更好地支持 CSS 网格之前，您将需要 javascript。

标签： css

【解决方案1】：

只需将display:flex 添加到您的容器类中，如下所示：

.container {
    width: 320px;
    display:flex;
}

Demo

【讨论】：

【解决方案2】：

首先，我建议花时间学习 CSS 盒子模型：https://www.w3.org/TR/CSS2/box.html。

这是 CSS 的基本部分，对您的查询很重要。例如，上图中的文本导致深灰色背景的框展开。使用 CSS 盒子模型，您可以确保不会发生这种情况。有多种方法可以实现这一点，但一个示例是为相关元素使用以 px 为单位的固定高度。

文本的垂直对齐可以通过vertical-align 属性使用middle 的值来实现。您可以在 W3C 的网站上了解更多关于 vertical-align 属性以及如何使用它的信息：https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

如果您需要更多帮助，请发布一些您用于创建上述内容的代码示例。

【讨论】：