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: http://new.leicesterymca.co.uk/youth-community/our-work/adult-homelessness/

It’s just a standard ul with li elements:

  • One
  • Two
  • Three
  • Four

Here’s the CSS I have:

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

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

li:before {
  /* -content: "●";-*/
  content:"";
  background-image: url('http://new.leicesterymca.co.uk/wp-content/uploads/2017/03/arrow-bullet.png');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: .7em;
}

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

a:hover {
  color: #163a52;
}

Thanks.

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

使用声明 | 英豪名录