How to centralize a jute list with Bullets?

Asked

Viewed 201 times

2

I’m dealing with css and I’m having a problem with a problem I’m a few days trying to solve, tried the best methods, but none solved.

The problem is: I’m trying to centralize the list along with the Bullets (the balls on the left), when you make a line is no problem, but when a natural line break occurs (without using tags like <p> and <br>), he stops standing next to the Bullets.

I also tried to make the Bullets with <span> or <i>, but the problem is not in Bullets but in the space that the <li> is occupied.

Codes:

.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>

inserir a descrição da imagem aqui

html css html5

1 answer

2


Just add list-style-position: inside; The div who has the Bullets.

.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" style="list-style-position: inside;">

		<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>

  • You helped me a lot, and that wasn’t even my mistake, but that fixed, my problem was when I was building the list, I was using the code like this: <ul> <li> <p> TXT </p> </li> <ul> This would cause Bullet to end up on top of the text. Thank you very much.

  • 1

    @Weblastwolf but it was not what it intended to center the points?

  • Yes, you helped me find my mistake, when I used the list-style-position: inside; the Bullets ended up stopping on top of the texo, but the problem is that in my other code I was using the tag <p>

  • 1

    Ok, I used with the code you provided so I did not identify this problem. If you want instead of deleting the <p> can simply exchange for <span>.

  • The tag <span> have to be very careful when using it, it causes the visually impaired to get lost by the site, many programs describing ignore the <span>

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.