<p>The design for the website I am working on calls for a custom image on lists instead of a bullet.  Using the image is fine, but I have been having difficulties ensuring that it is centered against the text of the list item across all browsers.  Does anyone know of a standard solution for this?</p>

[{'answer_id': 64340, 'author': 'Dillie-O', 'author_id': 71, 'author_profile': 'https://Stackoverflow.com/users/71', 'pm_score': 0, 'selected': False, 'text': '<p>Have you tried adding the following code in your CSS file?</p>\n\n<pre class="lang-css prettyprint-override"><code>li\n{\n   background-image: URL(\'custom.png\');\n   background-repeat: no-repeat;\n   background-position: center;\n}\n</code></pre>\n'}, {'answer_id': 64635, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 4, 'selected': True, 'text': '<p>If you are referring to using a custom image bullet for your list this is the code you\'ll want to use, it will be vertically centered. I\'m assuming here that the bullet image is 12px by 12px.</p>\n\n<pre class="lang-css prettyprint-override"><code>ul li {\n  background: transparent url(/link/to/custom/bullet.gif) no-repeat 0 50%; \n  padding-left: 18px; \n}\n</code></pre>\n\n<p>The only problem with this is that sometimes on long multi-line list items it looks odd. In that case it might be best to assign the background position to a slight indent from the top and the left (i.e. no-repeat 0 7px). </p>\n\n<p>cheers, Bruce</p>\n'}, {'answer_id': 14220281, 'author': 'dottwatson', 'author_id': 540283, 'author_profile': 'https://Stackoverflow.com/users/540283', 'pm_score': 0, 'selected': False, 'text': '<p>set a specific line-height on the li element and a vertica align on the image.. worked for me </p>\n\n<pre class="lang-css prettyprint-override"><code>li { height: 150px; line-height: 150px; }\nli img { vertical-align: middle; }\n</code></pre>\n\n<p>and the HTML code</p>\n\n<pre><code>&lt;li&gt;&lt;img src="myimage.jpg" /&gt;&lt;/li&gt;\n</code></pre>\n\n<p>if you want adapt the image to a custon size, preserving the ratio</p>\n\n<pre class="lang-css prettyprint-override"><code>li img { max-width: 150px; max-height: 150px; width: auto; height: auto; }\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/64311', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4284/']