MVC newbie
Reputation: 599
CSS align for list
i have this piece of code which not in order.i am trying to make it appear in the middle of the page but i want to to stick to one line in verticle. current outcome is as below.How do i adjust contacts inline?
<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>
Upvotes: 0
Views: 38
Answers (1)
GvM
Reputation: 1733
add text-align:center to the div containing your ul, then change the ul text-align:center to text-align: left and add 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>Upvotes: 1