2017-04-18 97 views
0

我有这段代码不按顺序。我试图让它出现在页面中间,但我想坚持在垂直线中的一条线。 目前的结果如下。如何调整内联联系人?CSS对齐列表

enter image description here

<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>[email protected]</li> 
              </ul> 
             </div> 
               <br> 
            </div> 

回答

1

添加text-align:center到div包含您ul,然后更改ultext-align:centertext-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>[email protected]</li> 
 
              </ul> 
 
             </div> 
 
               <br> 
 
            </div>

+0

这一点。这工作。谢谢 –