I'm very much an HTML/CSS beginner, so I'm having trouble with the following: The list items (with icons) in this Bootstrap modal are correctly left-aligned in relation to one another. However, I want the entire list to appear in the center of the modal.
To get the list items to left-align properly, I have this in my CSS:
.modal-list > li > a {
color:#333;
text-decoration: none;
list-style: none;
display: block;
text-align: left;
}
And here's (what I think is) the relevant HTML:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Sign up or log in using OpenID</h4>
</div>
<div class="modal-body">
At this time, CloudSim is in beta and by invitation only. If you have received an invite, pick a login option below.
<!--OpenID options -->
<ul class="dropdown-menu-modal" style="list-style-type:none;">
<li>
<a href="/auth/google"><img class="inline-block"
alt="Google" width="46" src="/img/icons/google.svg"/> Google</a>
</li>
<li>
<a href="/auth/yahoo"><img class="inline-block"
alt="Yahoo" width="46" src="/img/icons/yahoo.svg"> Yahoo</a>
</li>
<li>
<a href="/auth/aol"><img class="inline-block"
alt="AOL" width="46" src="/img/icons/aol.svg"> AOL</a>
</li>
<li>
<a href="/auth/openid"><img class="inline-block"
alt="OpenId" width="46" src="/img/icons/openid.svg"> OpenId</a>
</li>
</ul>
<!-- end here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end of modal -->
I don't have sufficient "reputation" to post an image, so here's a link to how it looks currently: http://imgur.com/c7mrjfV
You can give the aa width of 100% and then align the text to the center.
That would be responsive, so you wouldn't need to worry about adding specific widths.
Try adding these two lines of CSS
.modal-list > li > a {
color:#333;
text-decoration: none;
list-style: none;
display: block;
text-align: left;
width: 100%;
text-align: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.