如何将多行文本与背景图像设置垂直对齐：之前

Question

我有一个元素列表，其中添加了图标作为:before的背景。当标题长度很大时，文本会出现在图像下面。

我如何才能在咨询服务之下提供服务？

li>a {
  position: relative;
  display: block;
}

.submenu-icon:before {
  content: "";
  margin-right: 0px;
  background: url(/sites/all/themes/bootstrap_cck/images/sprites.png) no-repeat;
  background-size: 40em;
  background-position: -250px -184px;
  padding: 15px 40px 12px 15px;
  display: inline-block;
  vertical-align: middle;
  line-height: 47px;
  width: 55px;
  height: 47px;
}

<li class="first">
  <a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services  </a>
</li>

Answer 1

您可以在a元素上使用a { align-items: center; display: flex; width: 300px; border: 1px solid black; } .submenu-icon:before { content: "PSEUDO"; padding: 20px; }。

＆＃13;

＆＃13;

<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services  </a>

＆＃13;

a {
  align-items: center;
  display: flex;
  width: 300px;
  border: 1px solid black;
}
.submenu-icon:before {
  content: "";
  background: url('http://images2.wikia.nocookie.net/__cb20100211112757/dexter/de/images/2/27/System-search.png') no-repeat;
  width: 40px;
  height: 40px;
  background-size: contain;
  margin: 15px;
}

＆＃13;

＆＃13;

＆＃13;

或者使用背景图片，它应该是这样的。

＆＃13;

＆＃13;

<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services  </a>

＆＃13;

<xsl:template match="bib-info">
  <xsl:variable name="newtext">
    <xsl:call-template name="string-replace-all">
      <xsl:with-param name="text" select="text()" />
      <xsl:with-param name="replace" select="']:                           '" />
      <xsl:with-param name="by" select="']: '" />
    </xsl:call-template>
  </xsl:variable>
  <bib-info><xsl:value-of select="$newtext" /></bib-info>
</xsl:template>

＆＃13;

＆＃13;

＆＃13;