[英]Vertically center <li> text with bullet image?
因此,我試圖弄清楚如何將自定義項目符號圖像中的某些文本垂直對齊。 這是我所擁有的:
<ul>
<li>LINE OF TEXT</li>
<li>LINE OF TEXT</li>
<li>LINE OF TEXT</li>
</ul>
對於CSS ...
#div .class
{
color: #4c361c;
font-size: 13px;
list-style-image: url(../images/image.png);
}
#div .class li{ }
是否有人對如何執行此操作有任何想法?
這是一個演示 。
使用背景圖像可以獲得理想的效果。
的HTML
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
的CSS
ul {
list-style: none;
}
ul > li {
background: url('../imgpath/bullet-image.png') no-repeat left center;
/* Adjust the padding for your custom bullet image */
padding: 10px 0 10px 34px;
}
現在定義你li
background bullets
,並設置為background-position
根據您的設計
像這樣
的CSS
ul{
margin:0;
padding:0;
list-style:none;
}
li {
background:url("http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon.jpg") no-repeat 0 -2px;
padding-left:20px;
line-height:14px;
font-size:14px;
margin-top:12px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.