How to horizontally align to the centre a li inside an ul?

HTML & CSS

I am working with the following template:

<ul>
<li class="show-large-placeholder">
 <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?

Comments

Shilpa

4 Mar 2022

Best Answer

You need to set a fixed width or a container first and after that,

on your ul for `margin-right:auto` and `margin-left:auto`.

You can also set CSS property to your class to align items in the center.

.show-large-placeholder {
 	text-align: center;
}

Hope it works as expected for you.

Gulafsan Shaheen

5 Mar 2022

Thank you so much!

Terms & Conditions
Privacy Policy
Cookie Policy