垂直对齐图标，带有多行文本

Question

我有以下CSS：

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

有人可以给我一些关于如何在最后一项中间带上“+”图标的提示吗？

Answer 1

您可以使用：

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

＆＃13;

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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。