Bootstrap居中的div内左对齐文本

Question

我有一个居中的div里面有四行诗歌。因为是诗歌，所以我需要这四行左对齐，但不是对齐到div的左侧。

以下是它如何居中：

     Lorem ipsum dolor sit amet, 
        onsectetur adipisicin.
  Doloribus, totam unde facilis omnis 
        temporibus nostrum in

Here is how I want it:

  Lorem ipsum dolor sit amet, 
  onsectetur adipisicin.
  Doloribus, totam unde facilis omnis 
  temporibus nostrum in

Thanks.

JSFIDDLE

- Serhii Borovskyi

---

你能提供你的HTML和CSS吗？或者创建一个JSFiddle？ - Jon Harding

text-align:left 对你不起作用吗？ - Jon Harding

text-align:left将其对齐到div的边缘。我需要文本保持在div的中心，只是一行接着一行地对齐。 - Serhii Borovskyi

我正在使用这个模板：http://getbootstrap.com/examples/carousel/。三条信息中间的文本是居中的。 - Serhii Borovskyi

抱歉，那讲不通。如果你想要缩进它，请使用“margin-left: 100px;”。 - JP Lew

抱歉，我不确定如何恰当地解释这个问题。文本是居中的，因此每行都是居中的。我希望每行都能对齐。我还在每行之间使用 <br> 标签。我将尝试创建一个 jsfiddle。 - Serhii Borovskyi

Answer 1

这是解决方案：http://jsfiddle.net/YW7eS/2/

我删除了文本居中的样式，并使用了网格系统，以便您更好地控制布局。

<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4">
    ...
</div>

- RichC

Answer 2

由于您没有提供任何代码，因此很难帮助您，但这可能是您想要的。将左填充更改为任何数字以增加/减少文本与div之间的距离。

.poetry {
   padding: 0 0 0 20px;
}

.poetry p {
   text-align: left;
}

- Charles Ingalls

Answer 3

只需尝试这样做：

<div style="width: 500px; height: 500px; float: left;"></div>
<div style="float: left; margin-left: 30px;">
  Lorem ipsum dolor sit amet, 
  onsectetur adipisicin.
  Doloribus, totam unde facilis omnis 
  temporibus nostrum in
</div>

- JP Lew

Answer 4

你可以像这样改变代码，

.marketing .col-md-4 {
  text-align: left;
  margin-bottom: 20px;
}

在这里查看工作的fiddle

- Able Alias

---

你可以在DIV <div class="col-md-4 text-center">和<p class="text-left">中使用class "text-center"和"text-left"，它们都是Bootstrap的类。 - Able Alias

但不是整个<p>，只需使段落的前三行与第一行对齐即可。 - Serhii Borovskyi

然后将内容放入一个span标签中，您想要左对齐。 - Able Alias

span无法帮助。我删除了bootstrap.css 这是更新后的jsfiddle链接。正如您所看到的，如果我将<p>左对齐，它会移动到父容器的最左边。如何保持居中但四行都对齐？ - Serhii Borovskyi

你可以使用30%作为宽度。 - Able Alias

Answer 5

也许你想展示给我们代码，但是你可能希望在段落上使用 text-align:left。

- kenttam