CSS垂直对齐对象：之前

在我的网站www.drivkrets.se上，我试图使用CSS:before在标题前插入一个符号（橙色线条）。我已经能够插入正确大小的图像，但现在我想垂直对齐符号图像与文本。当标题在一行或三行时，我看起来不太好。我尝试过不同的代码变体，但没有一个有效

有人知道我该怎么做吗

在我命名“.specialrubrik”之前，假设有此符号的标题。现在我正在使用代码：

.specialrubrik:before { 
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-     
 marker-e1490098005864.png');
float: left;
margin-right: 12px;
display: inline-block;
vertical-align: middle;
height: 100%;
}

致意

---

彼得这是一个CSS问题，与WordPress无关。您不希望浮动

内联块

元素，而

垂直对齐

仅适用于

显示：内联块

元素

。示例标题：before{
显示：内联块；/*无浮动！“middle”仅适用于内联块*/
内容：url（'http://www.drivkrets.se/wp-content/uploads/2017/03/orange-marker-e1490098005864.png');
垂直对齐：中间对齐；
右边距：12px；
}

---

示例标题

谢谢您的想法@sheriffderek。我还是不明白。 我现在更改了代码，并尝试在h2上使用：before

h2:before { 
content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-     
marker-e1490098005864.png');
margin-right: 12px;
display: inline-block;
vertical-align: middle;
height: 100%;
}

h2 { 
text-align: left;
display: -webkit-inline-box;
vertical-align: middle;
}

当我有一个短标题时，它可以工作，但如果标题是两行或三行，它看起来很奇怪。示例：“直到elsystem时代的财政危机”。你知道我如何让所有的文字都流向符号的右边吗

---

彼得

欢迎彼得。如果可以，最好在JSFIDLE或类似的工具中创建一个小的工作示例。包括相关的标记，以及省略不重要的内容也很重要。：）@饥饿之星-我认为你的编辑没有价值。我试图向OP展示JSFIDLE是如何故意工作的。向后移动显式内容URL（一周内可能不存在）也消除了我的观点，即OP在提问时应该使用简化版本。我认为你浪费了你的时间，使这个答案对OP和其他人没有多大用处。我可以在

内容
URL上看到你的观点，我很乐意改变这一点，但对其他观点完全不同意。如果一个人可以创建一个简化版的问题，为什么要在异地创建呢？所有代码都很容易看到，并向OP和未来的访问者等演示了解决方案。没有人需要离开网站，就像你担心URL过期一样，第三方网站（如JSFIDLE、CodePen等）也可能存在同样的问题。你不能保证这些第三方网站将来会出现，并且可能会丢失有价值的见解（代码）。在SO上包含一个工作示例符合每个人的利益。有时，第三方站点提供的功能目前超出了的功能，并且是合适的，但在本例中并非如此。我的编辑提供了一个很好的例子，因此，少一步了解一些东西是如何工作的就是一个胜利。我明白你的观点，但是学习如何建立一个有针对性的问题样本在这里是一个可教的时刻。创建“堆栈片段”对普通人来说有更高的障碍。同意不同意。这篇文章可能会因为你而继续创造不太精彩的帖子。是的，我想30秒的现场工作示例是在浪费时间。我想为你提供一些不同的示例，但@hungerstart可能只是编辑它。我就把它贴在这里：祝你好运！太好了，太好了！万分感谢，现在它能像我想的那样工作了。