CODEWITHSUNDEEP
htmlcsslistalignment
ibi0tux
ibi0tux

Reputation: 2619

Force line break after list bullets

I'm looking for any nice way to automatically put the list disc marker above text instead of at the left. Like so :

example

I'm currently using something like :

<li>
    <br />
    Item 1
</li>

<li>
    <br />
    Item 2
</li>

<li>
    <br />
    Item 3
</li>

To force the text to be placed under the dot but in one hand adding line breaks before text in each list item makes the source quite confusing and one the other hand, it does not do what I expect, since even with a text-align: center the dot appears slightly on the left because of an implicit margin on the right of each dot.

Maybe am I missing some CSS property or my approach is not good. Any advice is welcomed, thanks.

Upvotes: 4

Views: 3773

Answers (2)

Stickers
Stickers

Reputation: 78686

Those solutions do not change <li> default behavior.

DEMO 1

HTML (with br tag)

ul {
  list-style-position: inside;
  background: yellow;
  overflow: hidden;
}

li {
  float: left;
  text-align: center;
}
<ul>
  <li><br />Item 1</li>
  <li><br />Item 2</li>
  <li><br />Item 3</li>
</ul>

DEMO 2

HTML (no br tag)

ul {
  list-style-position: inside;
  background: yellow;
  overflow: hidden;
}

li {
  float: left;
  text-align: center;
}

li:before {
  content: "";
  display: block;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Upvotes: 3

isherwood
isherwood

Reputation: 61083

li {
    display: inline-block;
    background: pink;
}
li::before {
    content:'•';
    display: block;
    text-align: center;
}
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Upvotes: 7

Related Questions