html - CSS 对齐列表

Question

我有这段代码没有按顺序排列。我试图让它出现在页面的中间，但我想在垂直线中坚持一行。 当前结果如下。如何调整内联联系人？

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