Currently, I am developing a slider using Bootstrap, and I have encountered an issue where the text displays on the left instead of aligning to the center in relation to the elements.
To see this issue in action, you can check out the live demo here:
In order to better visualize the problem, I have changed the background to highlight the position of the text (1 and 2).
This is the HTML code snippet:
.carousel-indicators {
text-align: center;
}
.carousel-indicators li {
width: 20px;
display: inline-block;
height: 20px;
line-height: 20px;
font-size: 12px;
padding: 0;
margin: 2px;
color: #fff;
border: 0;
border-radius: 0;
background-color: #222;
text-align: center;
}<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active">1</li>
<li data-target="#carousel-2" data-slide-to="1">2</li>
</ol>