对齐项目符号和居中文本

Question

文本偏离中心，项目符号与文本重叠。顶部的li位于页面的中间。第二个里向左对齐。第三个li向右对齐。它们都有与文本重叠的子弹。

    <div class="container counter-container">
<ol>
    <div class="media-container-row">
        <div class="mbr-text counter-container col-12-md mbr-fonts-style display-4">
           <div class="row">
                <div class="col-md-12">

                        <li><span class="a"><strong>COMMUNITY</strong> - Bringing schools and communities together for a common cause.</span></li>

                </div>
            </div>
        </div>
    </div>
    <div class="media-container-row">   
        <div class="mbr-text counter-container col-md-12 mbr-fonts-style display-4">
            <div class="row">
                <div class="col-md-12">

                        <span class="b"><li><strong>EASY AND SIMPLE</strong> - Coaches, Create a Schedule. &nbsp;Fans, sponsor your team.</li></span>

                </div>
            </div>
        </div>
    </div>

    <div class="media-container-row">
        <div class=" counter-container col-12-md mbr-fonts-style display-4">
            <div class="row">
                <div class="col-md-12">

                        <span class="c"><li><strong><br><center>FUN</strong> - Encourages fans to show up and players to try harder!</li></span>

                </ol>
                </div>
            </div>
        </div>  
    </div>
</div>

Answer 1

您使用的是bootstrap，所以只需使用bootstrap类来设置您的列表：

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Answer 2

尝试将所有<li>标记放在第二行和第三行的跨度之外。

另外，删除第三个列表项之前的<br>标记。

如果这还不能完全解决问题，你能把它附带的CSS贴出来吗？特别是a、b和c类？