![](/img/trans.png)
[英]How to position text content with an h2 element to the right while still being text-aligned left?
[英]How to center an <ul> while <li> elements are text-aligned to the left?
我有一个我试图居中的无序列表,同时保持列表项的text-align
,这样它们看起来又漂亮又整洁。 我不知道如何在不分配宽度和使用margin: 0 auto
的情况下做到这一点,我的问题是,有没有更好的方法在让列表项text-align: left
的同时使无序列表居中?
ul.step-list { list-style: none; display: flex; flex-wrap: wrap; padding: 0; } ul.step-list li { flex: 0 0 33.333333%; text-align: left; } /* The container */.checkbox-container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */.checkbox-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* On mouse-over, add a grey background color */.checkbox-container:hover input ~.checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */.checkbox-container input:checked ~.checkmark { background-color: #1f355e; } /* Create the checkmark/indicator (hidden when not checked) */.checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */.checkbox-container input:checked ~.checkmark:after { display: block; } /* Style the checkmark/indicator */.checkbox-container.checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
<ul class="step-list"> <li> <label class="checkbox-container"> <span class="lbl">33' Lot Collection</span> <input type="checkbox" id="type" value="7"> <span class="checkmark"></span> </label> </li> <li> <label class="checkbox-container"> <span class="lbl">36' Lot Collection</span> <input type="checkbox" id="type" value="8"> <span class="checkmark"></span> </label> </li> <li> <label class="checkbox-container"> <span class="lbl">40' Lot Collection</span> <input type="checkbox" id="type" value="11"> <span class="checkmark"></span> </label> </li> <li> <label class="checkbox-container"> <span class="lbl">46' Lot Collection</span> <input type="checkbox" id="type" value="17"> <span class="checkmark"></span> </label> </li> <li> <label class="checkbox-container"> <span class="lbl">50' Lot Collection</span> <input type="checkbox" id="type" value="18"> <span class="checkmark"></span> </label> </li> <li> <label class="checkbox-container"> <span class="lbl">Back To Back</span> <input type="checkbox" id="type" value="14"> <span class="checkmark"></span> </label> </li> <li> <label class="checkbox-container"> <span class="lbl">Semi Collection</span> <input type="checkbox" id="type" value="13"> <span class="checkmark"></span> </label> </li> <li> <label class="checkbox-container"> <span class="lbl">Towns 2 Storey</span> <input type="checkbox" id="type" value="9"> <span class="checkmark"></span> </label> </li> <li> <label class="checkbox-container"> <span class="lbl">Towns 3 Storey</span> <input type="checkbox" id="type" value="15"> <span class="checkmark"></span> </label> </li> </ul>
附上一张截图,注意到整个列表在左边,右边有很多空白。 我希望我的列表位于页面中间。
using margin: 0 auto
仍然可以使用。
您可以使用的另一个选项是 flex。 但是你必须用 div 包裹你的ul
flex 有能力让他的孩子水平和垂直居中。
请看下面的代码
div.step-list-wrapper {
justify-content: center;
align-items: center;
background: #666;
display: flex;
}
ul.step-list {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;
background: #333;
}
ul.step-list li {
flex: 0 0 33.333333%;
text-align: left;
}
<div class="step-list-wrapper">
<ul class="step-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
ul.step-list {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;
margin:0 auto;
width:66%; /*For example*/
background:red; /*To highlight*/
}
Margin:0 auto
和 UL 宽度...
JSFiddle: http://jsfiddle.net/zg1jLx9s/
如果您使用的是引导程序,则可以在 li 标签中使用 class "text-center"。 或属性 text-align: center;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.