带有多行文本的垂直对齐图标[重复]答案

【问题标题】：Vertical align icon with multiline text [duplicate]带有多行文本的垂直对齐图标[重复]
【发布时间】：2018-06-07 12:50:00
【问题描述】：

我有以下 CSS：

.dropdown section h4::after {
    content: url(img/plus-symbol.svg);
    right: 0;
    vertical-align: middle;
    position: absolute;
    display: inline-block;
}

谁能给我一点提示，告诉我如何将“+”图标放在最后一项的中间？

【问题讨论】：

发挥最高价值.. 试试top:45%
尝试添加这两条规则：top: 50%; transform: translateY(-50%);

标签： html css

【解决方案1】：

你可以使用：

top: 50%;
transform: translateY(-50%);

ul {
  width: 100px;
  padding-left: 0;
}

li {
  position: relative;
  list-style: none;
  border: 1px solid;
  padding-right: 20px;
  margin-bottom: 10px;
}

li:after {
  content: "+";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Lorem ipsum dolor sit amet</li>
</ul>

【讨论】：

但我使用的是 h4 部分 div::after{content:" "}，我没有使用 ul li :(

【解决方案2】：

.dropdown section h4 {
    position: relative;
}

.dropdown section h4::after {
    content: url(img/plus-symbol.svg);
    right: 0;
    vertical-align: middle;
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%)
}

更多关于browser compatibility of transform的信息 transform: translate() 属性允许您相对于元素的高度或宽度移动元素。因此，如果您的 + 图标确实有 40px 的高度，则 transform: translateY(-50%) 将向上移动 20px 的元素。

您也可以查看display: table-cell 以使用vertical-align: middle，但这可能取决于您的HTML 结构。 :)

另一种解决方案是使用flexbox。

【讨论】：