css - 垂直对齐和响应式 SVG 图标答案

【问题标题】：css - vertical align and responsive SVG iconcss - 垂直对齐和响应式 SVG 图标
【发布时间】：2016-04-29 22:38:20
【问题描述】：

我想垂直对齐一个 SVG 图标，但我不知道该怎么做。同时，我不知道如何使这个 svg 图标也以一种我可以轻松更改其大小的方式做出响应。也许 svg 图标的格式不正确...

小提琴：https://fiddle.jshell.net/jc68skkj/

谢谢

【问题讨论】：

尝试使用vertiacal-align: middle;? fiddle.jshell.net/jc68skkj/2
感谢您的回答，但 scg 图标仍未垂直对齐...
将vertical-align... 替换为padding-top: 2px;，心脏位于文本的基线上，这是（正确的）默认位置。填充心脏或文本。

标签： css svg vertical-alignment

【解决方案1】：

为了通过vertical-align垂直对齐内容你需要做一些准备。

您的子容器（包括vertical-align: middle;）所在的父容器需要位于display: table;。另外，孩子需要有display: table-cell;。

这些准备工作最终将允许您在子容器中使用vertical-align: middle;。

这意味着，vertical-align 只能分配给table-cell 元素。另外，不要忘记为您的父容器使用height。如果没有特定的height，您的父母将适应您的孩子，这意味着无法垂直对齐内容。

编辑

我注意到您不需要在表格内声明表格单元格。至少，在您的情况下，这不是必需的。只需将您的 .post-like 更改为：

.post-like {
    height: 100px;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: auto;
    cursor: pointer;
    font-weight: 400;
    line-height: 25px;
}

【讨论】：

感谢您的回答，但主 div 必须与其他元素内联。而且垂直 aling 属性不需要显示到表格即可使其工作。