Aligning PNG Tag Points

综合技术 2017-12-31

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!

责编内容by:Hello, buddy! (源链)。感谢您的支持!

您可能感兴趣的

PHP Simple HTML DOM Parser Script In this post I have explained some elements to scrap data from external websites. S...
Stimulus 1.0:一个针对你已有的HTML的JavaScript框架... 现代JavaScript并不一定意味着客户端MVC单页Apps。 在 Basecamp ,我们写了许多JavaScript,但是我们并没有用它来创造当代意义上的“Ja...
Stop a border line from going under a floated imag... Hi have an image floated left and then paragraphs of text to the right of it. I want to have a greyl...
The banner A is displayed on page.html ... I want to display bannerA.js when visitor is on page.html, and display bannerB.js when visitor is on...
Stimulus 1.0: A modest JavaScript framework for th... Modern JavaScript doesn’t have to mean single-page, client-side MVC a...