html - How to center the list icon for an image inside a li element -
li{ height: 20px; line-height: 20px; vertical-align: middle; }
<ul style="list-style-type: circle"> <li><img src="http://latex.codecogs.com/gif.latex?a=b+\left&space;(&space;c+d&space;\right&space;)^2" height="20" width="150"></li> </ul>
as not of browser support mathml use images equations. adjust height of images don't have problem when use images in text. have problem using images list element, bullet icon shown aligned bottom of image.
i tried specify height of li
element same height
of image , assign same value line-height
property. after use vertical-align: middle
property doesn't work.
what can done vertically center bullet icon?
you need vertical-align
img
:
ul { list-style-type: circle; } li { height: 20px; line-height: 20px; position:relative; } li img { height:20px; width:150px; border: 1px solid blue; vertical-align: middle; /* <-- */ } li::after { content: ''; display: block; position: absolute; top: 50%; width: 100%; border-bottom: 1px solid red; }
<ul> <li> <img src="http://latex.codecogs.com/gif.latex?a=b+\left&space;(&space;c+d&space;\right&space;)^2" /> </li> </ul>
Comments
Post a Comment