Question

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

有谁知道我应该怎么做？

在我命名为“.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%;
}

祝你好运彼得

Answer 1

这是一个CSS问题，与WordPress无关。您不希望浮动inline-block元素，而vertical-align仅适用于display: inline-block元素。

.example-heading:before {
  display: inline-block; /* no floats! 'middle' only works with inline-block */
  content:url('http://www.drivkrets.se/wp-content/uploads/2017/03/orange-marker-e1490098005864.png');
  vertical-align: middle;
  margin-right: 12px;
}

<h2 class='example-heading'>Example heading</h2>

Answer 2

感谢您的想法@sheriffderek。我仍然没有做对。我现在改变了代码并尝试使用：之前在h2上。

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

当我有一个短标题时，它可以工作，但如果标题是两行或三行，它看起来很奇怪。例如：“Kunskap och uppfinningsikedom直到时代系统”。你知道我怎么能让所有的文字都在符号的右边？

彼得

CSS垂直对齐对象：

2 个答案: