Gulafsan Shaheen
Published in : 2022-03-04

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

HTML & CSS

I am working with 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?

Comments

Shilpa Date : 2022-03-04

Best answers

10

Best answers

10

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 Date : 2022-03-05

Best answers

1

Best answers

1

Thank you so much!

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Do I have to upload the sass files or just the CSS file?
Publish date: 2022-02-11 | Comments: 1

Tag: HTML & CSS

Can't move the background-image code from CSS file to HTML file.
Publish date: 2022-02-13 | Comments: 2

Tag: HTML & CSS

How do custamize my button to give it a bubble look using CSS?
Publish date: 2022-03-04 | Comments: 0

Tag: HTML & CSS

Searching for a better way to use abstracts in Dart SASS
Publish date: 2022-02-10 | Comments: 0

Tag: HTML & CSS

What is the need for using (for) attr in the label of an input tag?
Publish date: 2022-02-11 | Comments: 2

Tag: HTML & CSS

Flex Box last column break to the next row
Publish date: 2022-02-10 | Comments: 1

Tag: HTML & CSS

How can I add engraved style to my buttons using CSS?
Publish date: 2022-03-01 | Comments: 5

Tag: HTML & CSS

Is OOCSS still a good CSS architecture in 2022?
Publish date: 2022-02-08 | Comments: 2

Tag: HTML & CSS