Aligning PNG Tag Points

I have managed to display graphical bullet points on my website but I cant get the point to align to the middle of the text properly.

It’s as if I just need to add margin to the bullet image that doesn’t effect the text.

Here’s the page I’m working on:

It’s just a standard ul with li elements:

  • One
  • Two
  • Three
  • Four

Here’s the CSS I have:

ul {
  list-style: none;
  margin:40px 0 40px 0;

li {
  margin-bottom: 20px;
  padding-left: 2.3em;
  text-indent: -2.3em;

li:before {
  /* -content: "●";-*/
  background-image: url('');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: .7em;

a {
  text-decoration: none;
  color: #2f9395;

a:hover {
  color: #163a52;


Try adding…

li:before {
  vertical-align: middle

to your CSS

Hello, buddy!稿源:Hello, buddy! (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Aligning PNG Tag Points

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录