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&plus;\left&space;(&space;c&plus;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&plus;\left&space;(&space;c&plus;d&space;\right&space;)^2" />      </li>  </ul>


Comments

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

php - How do you embed a video into a custom theme on WordPress? -