How to vertically conditionally align to the middle a li inside an ul-CodePudding

I have the following template:

<ul>
<li >
    <img ....>
</li>

I am trying to align this list item in the center of the UL, I don't have access to changes of style for the ul, because the class show-large-preview on the li is conditionally added, so seeing display table won't work here.

Any ideas?

CodePudding user response：

Add your own id element to the li, like so:

<ul>
<li id="center-li" >
    <img ...>
</li>

Then, you can apply css to that id, instead of the whole class:

center-li {
    /* Add your css here */
}

That should do it.