html - 具有多行文字的垂直对齐图标

This question already has answers here:

Vertically centering content of :before/:after pseudo-elements
                                
                                    （6个答案）
                                
                        
                                2年前关闭。
            
                    
我有以下CSS：

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

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

最佳答案

您可以使用：

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>

关于html - 具有多行文字的垂直对齐图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47982626/