我有一个元素列表,其中添加了图标作为 :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>
最佳答案
您可以在 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/