CSS对齐列表

Question

我有一段没有顺序的代码，我试图使它出现在页面的中间，但我想坚持一行的垂直线。目前的结果是当below.How我调整联系人内联？

​

​

<div class="col-md-12"> 
                                        <div>
                                            <ul class="list-icons" style="text-align: center;margin-left:0;">
                                                <li><i class="fa fa-phone-square pr-10 text-default" style="font-size:15px"></i> +65 1234567</li>
                                                <li><i class="fa fa-fax pr-10 text-default" style="font-size:15px"></i> +65 12345678</li>
                                                <li "><i class="fa fa-envelope pr-10 text-default" style="font-size:15px"></i>contactus@testmail.com</li>
                                            </ul>
                                        </div>
                                                <br>
                                    </div>

Answer 1

将text-align:center添加到包含ul的div中，然后将ul text-align:center更改为text-align: left并添加display: inline-block

​

<script src="https://use.fontawesome.com/89d51f385b.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12">
  <div style="text-align:center;">
    <ul class="list-icons" style="text-align: left;margin-left:0; display:inline-block; list-style-type: none;">
      <li><i class="fa fa-phone-square pr-10 text-default" style="font-size:15px"></i> +65 1234567</li>
      <li><i class="fa fa-fax pr-10 text-default" style="font-size:15px"></i> +65 12345678</li>
      <li><i class="fa fa-envelope pr-10 text-default " style="font-size:15px"></i>contactus@testmail.com</li>
                                            </ul>
                                        </div>
                                                <br>
                                    </div>

​