CODEWITHSUNDEEP
htmlcss
Zalajbeg
Zalajbeg

Reputation: 433

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 all of the browser support MathML I use images for equations. As I adjust the height of the images I don't have a problem when I use the images in text. However I have a problem using images as a list element, the bullet icon is shown aligned with the bottom of the image.

I tried to specify the height of the li element the same as the height of the image and assign the same value to line-height property. After that even I use vertical-align: middle property it doesn't work.

What can be done to vertically center the bullet icon?

Upvotes: 2

Views: 5997

Answers (3)

Mouhamad Kawas
Mouhamad Kawas

Reputation: 370

You can put the image inside a div

li{
  height: 20px;
  line-height: 20px;
}
div {
   text-align: center;
}




<ul style="list-style-type: circle">
        <li><div><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"></div></li>
    </ul>

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28397

You need to vertical-align the 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; /* <-- this */
}
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>

Upvotes: 2

APAD1
APAD1

Reputation: 13666

Instead of adding vertical-align:middle; to the list item, add it to the image:

li img {
    vertical-align:middle;
}

JSFiddle

Upvotes: 2

Related Questions