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:

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!

责编内容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...