居中并左对齐 - Bootstrap答案

【问题标题】：Centered and aligned left - Bootstrap居中并左对齐 - Bootstrap
【发布时间】：2018-05-11 16:43:28
【问题描述】：

我试图弄清楚如何在页面中居中但左对齐的项目列表，以便它们齐平。我正在使用引导程序。例子：

我想要页面中心的文字 - 左对齐

<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>

【问题讨论】：

真的不清楚你想要什么。是否要删除 <ul>s 的默认 padding-left？是否要删除 list-style-type？您是否希望您的 <li>s 仅拉伸其父 <ul> 的一部分并且左右边距相等？你想让它们排成一行吗？是否要将list-style-position 设置为inside？ "flush" 在这种情况下是什么意思？
我想要页面中心的文字 - 左对齐
Lilke this 或喜欢 this?
第二个完美
我建议在<ul> 上设置背景，以便对齐可见。如this.

标签： html css twitter-bootstrap text

【解决方案1】：

经过编辑使其类似于 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>

【讨论】：

不需要从文档流中删除元素。你为什么要这么做？
position:absolute 将元素从文档流中移除，并且它不是必需的。对于任何使用您的代码的人来说，它都有可能成为问题。如果 "that" 是质量并且它指的是答案，我也只想要 that。 :)
如果你还是不明白我在说什么，请看this example。
如果父级有一个设定的高度（或者一个结果高度，比如说从一个拉伸的弹性项目并且高度由一个同级弹性子级设置），垂直居中是有意义的。您回答决定应该在最近定位的父级（或视口）内完成居中，而不管任何其他内容（可能是因为没有提供其他内容 - 但这并不一定意味着您的解决方案可用）。我希望你不介意我指出来。 :)
解决“问题”的最简单方法是发送至position the parent and give it height。但是您需要确保父级高于内容。我不一定同意这个修复。一开始最好不要使用position:absolute。

【解决方案2】：

以下解决方案特定于 Bootstrap 4，但允许您将元素分别居中，宽度由内容确定：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row bg-light">
    <div class="col-auto mx-auto">
      <ul class="bg-secondary text-light">
      <li>Short Item #1</li>
      <li>Much Longer Item #2 </li>
      <li>Short Item #3</li>
      <li>Much Much Longer Item #3</li>
      </ul>
    </div>
  </div>
</div>

.col-auto 类也接受断点，因此您可以通过在不同的断点处强制不同的列行为来增强响应能力。 mx-auto 类强制左右边距相等，从而使列在屏幕上居中。

【讨论】：