html - 如何将多行文本与为 :before 设置的背景图像垂直对齐

标签 html css vertical-alignment pseudo-element

我有一个元素列表,其中添加了图标作为 :before 的背景。标题长度较大时图片下方的文字。

enter image description here

如何在咨询下方添加服务一词?

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>

最佳答案

您可以在 a 元素上使用 display:flex

a {
  align-items: center;
  display: flex;
  width: 300px;
  border: 1px solid black;
}

.submenu-icon:before {
  content: "PSEUDO";
  padding: 20px;
}
<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services  </a>

或者背景图片应该是这样的。

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;
}
<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services  </a>

关于html - 如何将多行文本与为 :before 设置的背景图像垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45503421/

相关文章:

jquery - 如何在 magnific 弹出窗口中嵌入 youtube 视频?

javascript - 如何使用 Angular Material 在具有可扩展行的表中创建嵌套垫表

javascript - CSS 垂直对齐生成的纯文本

html - CSS 滚动时隐藏滚动条

javascript - 使用 LESS 的 CSS nth-child 调节?

html -::在可变高度 div 的垂直对齐之前

html - 垂直对齐 Div

css - 尽管容器宽度固定,IE 仍强制 float div 到底部?

HTML/CSS - 段落显示源代码中的换行符

css - 垂直对齐(对于 IE!)