CSS:如何将列表元素与左对齐文本居中对齐?
Posted
技术标签:
【中文标题】CSS:如何将列表元素与左对齐文本居中对齐?【英文标题】:CSS: How to center align a list element with left aligned text? 【发布时间】:2017-09-01 18:01:38 【问题描述】:我试图在 div 中居中对齐列表,但保持文本左对齐。
所以,我希望所有项目符号垂直排列(左对齐),但整个列表本身应该位于中心,如下面示例中的段落:
.container width: 600px; padding: 2em; background: #eee;
.align-center text-align: center;
<div class="container">
<p class="align-center">Center Align Test</p>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Finally, the third and final element</li>
</ul>
</div>
【问题讨论】:
【参考方案1】:只需使用 flex 容器。
.flex-container
display:flex;
justify-content:center;
text-align: left;
<div class="flex-container">
<ul>
<li>Left Aligned #1</li>
<li>Left Aligned #2</li>
<li>Left Aligned #3</li>
</ul>
</div>
【讨论】:
【参考方案2】:将ul
设为inline-block
元素并将其居中。然后左对齐li
的文字。
.container
width: 600px;
padding: 2em;
background: #eee;
text-align: center;
ul
display: inline-block;
text-align: left;
.align-center
text-align: center;
<div class="container">
<p class="align-center">Center Align Test</p>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Finally, the third and final element</li>
</ul>
</div>
..或使用 Flexbox
.container
width: 600px;
padding: 2em;
background: #eee;
display: flex;
flex-direction: column;
align-items: center;
.align-center
text-align: center;
width: 100%;
<div class="container">
<p class="align-center">Center Align Test</p>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Finally, the third and final element</li>
</ul>
</div>
【讨论】:
【参考方案3】:将text-align: center;
添加到容器中,将ul
设置为inline-block
并提供ul
text-align: left;
.container width: 600px; padding: 2em; background: #eee; text-align: center;
.align-center text-align: center;
ul display: inline-block; text-align: left;
<div class="container">
<p class="align-center">Center Align Test</p>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Finally, the third and final element</li>
</ul>
</div>
【讨论】:
【参考方案4】:我建议将text-align:center
添加到容器div
中,以便ul
居中。然后你需要将display:inline-block
应用到ul
,这样它就不会占用整个水平空间。最后,将text-align:left
添加到ul
,这样center
就不会根据需要从父级继承。
.container width: 600px; padding: 2em; background: #eee; text-align:center
.align-center text-align: center;
ul display:inline-block; text-align:left
<div class="container">
<p class="align-center">Center Align Test</p>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Finally, the third and final element</li>
</ul>
</div>
【讨论】:
以上是关于CSS:如何将列表元素与左对齐文本居中对齐?的主要内容,如果未能解决你的问题,请参考以下文章
CSS:居中对齐文本,同时将容器的其他元素保持在左侧[重复]