Issue
I am trying to center align the li the tag and the dot and here is my tried code and i have used all the methods but i am unable to find any solution.
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div
class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-4-tablet"
>
<img
src="./assets/images/group.png"
style="display: block; margin: auto"
class="images"
/>
</div>
<div
class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-4-tablet"
>
<div>
<h2 style="text-align: center">staff</h2>
<ul style="list-style-position: inside; justify-items: center">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
Solution
You can wrap the ul with a div and try the following code.
<style>
.box{
display: flex;
}
.box ul{
margin: auto;
text-align: center;
}
</style>
<div>
<h2 style="text-align: center">staff</h2>
<div class="box">
<ul style="list-style-position: inside; justify-items: center">
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
</div>
</div>
Answered By - GI prim
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.