[英]How to center-align a left-aligned list in Bootstrap modal
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. 我非常喜欢HTML / CSS初学者,所以我遇到以下问题:此Bootstrap模式中的列表项(带图标)相对于彼此正确左对齐。 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: 要使列表项正确对齐,我在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: 这是(我认为)相关的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 我没有足够的“声誉”来发布图片,所以这里有一个链接到它当前的样子: http : //imgur.com/c7mrjfV
You can give the aa width of 100% and then align the text to the center. 您可以给出100%的宽度,然后将文本与中心对齐。
That would be responsive, so you wouldn't need to worry about adding specific widths. 这将是响应式的,因此您无需担心添加特定宽度。
Try adding these two lines of CSS 尝试添加这两行CSS
.modal-list > li > a {
color:#333;
text-decoration: none;
list-style: none;
display: block;
text-align: left;
width: 100%;
text-align: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.