Estou mexendo com css e estou com um problema com um problema que estou a alguns dias tentando resolver, tentei dos melhores métodos, mas nenhum resolveu.
O problema é:
Estou tentando centralizar a lista junto com os bullets (as bolinhas que fica na esquerda), quando você faz uma linha não é problema, mas quando ocorre uma quebra de linha natural (sem utilizar tags como <p>
e <br>
), ele deixa de ficar ao lado das bullets.
Eu tentei também fazer os bullets com <span>
ou <i>
, mas o problema não está nos bullets mas sim no espaço que o <li>
está ocupando.
Códigos:
.text-space{
display: flex;
width: 500px;
background: rgba(0,0,255,0.2);
}
.text-space>ul{
text-align: center;
}
.text-space>ul>li{
margin-top: 10px;
}
**Referência e código**
<div class="text-space">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li> Consectetur adipiscing elit, sed do eiusmod tempor incididunt </li>
<li>Ut labore et dolore magna aliqua. </li>
<li>Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </li>
</ul>
</div>