# Aligning Bulleted Lists

**URL:** <https://forums.ankiweb.net/t/aligning-bulleted-lists/8366>\
**Category:** Help\
**Created:** [March 15, 2021, 2:15pm UTC](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366 "2021-03-15T14:15:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 15, 2021, 2:15pm UTC](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366/1 "2021-03-15T14:15:21Z")

</div>

When I create a cloze the cloze deletion list content is centred. However, the bullet points are on the left and the text is in the middle which is really annoying.

 ![List](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/c20bb055de6defc0ff9c92815c43de697ba16f4b.png)

I want the bullet list to appear in the middle but be aligned to the left so the words occur right after the bullet point.  
Any help would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [March 15, 2021, 2:32pm UTC](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366/2 "2021-03-15T14:32:26Z")

</div>

**TL;DR** : You can fix this by wrapping your content in a container with the style “display: inline-block”.  
Let me demonstrate this with a very basic note template:

## Front Template

Create a container element for your question and answer:

```
...
 <div class="container">
    <div>{{Front}}</div>
 </div>
...

```

## Back Template

```
...
 <div class="container">
    <div>{{Front}}</div>
    <hr id=answer>
    <div>{{Back}}</div>
 </div>
...

```

> **How the HTML would really look during review**
>
> Basically, this is how the output would look on a real card in review, if it contains a list:
> 
> ```
> <div class="card ...">
> ...
> <div class="container">
> <div>Some question..</div>
> <hr id=answer>
> <div>
> <ul>
> <li>Item 1</li>
> <li>Item 2</li>
> <li>Item 3</li>
> </ul>
> </div>
> </div>
> ...
> </div>
> 
> ```

## Styling (CSS)

Set your container class to `display: inline-block` to fix the lists.

```
.card {
  ...
  text-align: center;
}

.container {
  display: inline-block;
  text-align: left;
}
```

---

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 15, 2021, 5:48pm UTC](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366/3 "2021-03-15T17:48:45Z")

</div>

Sorry I literally have no idea what this means 🤔

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [March 15, 2021, 6:13pm UTC](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366/4 "2021-03-15T18:13:39Z")

</div>

Assuming you’re using the default Cloze note type.

![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/c372e8f6c23689f6c5cdf0a03dd79ce0c8c55b27.png)

## Change this:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/4/4aaf5f8389f5de0cbb10ec8a8b58d461952be1b8.png)

## To this:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/f/fe0f62d167e5a3ea8117d1a4eee8a70c663601a3.png)

## Template Text for Copy Paste (slightly different from images to keep cloze text centered):

**Front:**  
`<div>{{cloze:Text}}</div>`

**Back:**

```
<div>{{cloze:Text}}</div>
<br>
<div class="container">
    <div>{{Back Extra}}</div>
</div>

```

**Styling:**

```
.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

.cloze {
 font-weight: bold;
 color: blue;
}
.nightMode .cloze {
 color: lightblue;
}

.container {
  display: inline-block;
  text-align: left;
}
```

---

<div class="post-metadata">

**Author:** ![GhostFlipper829](https://avatars.discourse-cdn.com/v4/letter/g/3d9bf3/32.png) [@GhostFlipper829](https://forums.ankiweb.net/u/GhostFlipper829)\
**Post date:** [March 20, 2021, 4:36pm UTC](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366/5 "2021-03-20T16:36:16Z")

</div>

This still isn’t working the bullet points are way off to the left. Attached are the images after inputting the data above. I would even cope with having the cloze deletions parts on the left as long as they are straight after the bullet points with the correct indentation

 ![Still Not right #2](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/c505d5ac29bb622fbb6365c93bd2b5a931c74874.png)  
 ![Still Not right #3](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/a/a798daa8bcbf0deb4253d157b9282ed23cf5fe20.png)  
 ![Still Not right #4](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/1/168950b2be7088e4c72bf987e2346c667fd25b26.png)  
 ![Still Not right #1](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/c/c037c5d938f51abcd7e7299ba0d410fcddc62e9c.png)

---

<div class="post-metadata">

**Author:** ![MedBooster](https://avatars.discourse-cdn.com/v4/letter/m/d2c977/32.png) [@MedBooster](https://forums.ankiweb.net/u/MedBooster)\
**Post date:** [February 10, 2022, 2:40pm UTC](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366/6 "2022-02-10T14:40:17Z")

</div>

I think the simplest solution is pasting this into the styling section (no need to change anything on the front and back template)  
Before and after screenshots are attached  
So basically `ul` = unordered list (bullet points)  
and `ol` = ordered list (numbered points)

```auto
ul > li {
  list-style-position: inside;
}

ol > li {
  list-style-position: inside;
}

```

Hope it helps!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/6/6004ad488f3343f667df5bdb6abb7ccc37f999e6.png)  
Uploading: image.png(1)…

---

<div class="post-metadata">

**Author:** ![jonathan100](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/jonathan100/32/3143_2.png) [@jonathan100](https://forums.ankiweb.net/u/jonathan100)\
**Post date:** [April 13, 2022, 10:01am UTC](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366/7 "2022-04-13T10:01:37Z")

</div>

I searched for exactly this solution, thank you so much ! amazing :))

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 4:25am UTC](https://forums.ankiweb.net/t/aligning-bulleted-lists/8366/8 "2023-05-01T04:25:47Z")

</div>