我试图弄清楚如何在页面中列出居中项目,但左对齐,以便他们重新刷新。我正在使用bootstrap。 例:
我喜欢页面中心的文字 - 左对齐
<ul class='text-center'>
<li class='text-left'> Short Item #1 </li>
<li class='text-left'> Much Longer Item #2 </li>
<li class='text-left'> Short Item #3 </li>
<li class='text-left'> Much Much Longer Item #3 </li>
</ul>
&#13;
答案 0 :(得分:2)
编辑,使其类似于OP的图片:
body {
height: 100%;
width: 100%;
margin: 0;
}
.container {
position: relative;
height: 200px;
}
.flex-container {
height: 100%;
width: 100%;
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.text-center {
background: pink;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, harum maiores. Ullam illo consequuntur eum ipsum fugiat, quidem pariatur quibusdam facilis dolores omnis voluptas similique quos commodi incidunt nesciunt error!</p>
<div class="container">
<div class="flex-container">
<ul class='text-center'>
<li class='text-left'> Short Item #1 </li>
<li class='text-left'> Much Longer Item #2 </li>
<li class='text-left'> Short Item #3 </li>
<li class='text-left'> Much Much Longer Item #3 </li>
</ul>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea minus sequi placeat eaque at nobis numquam reiciendis explicabo veniam illum consectetur, quis illo consequatur consequuntur! Excepturi nulla molestiae temporibus.</p>