居中引用，但保持文本左对齐

Question

我使用Bootstrap和CSS创建了一个简单页面。 我希望我的两个blockquotes在页面的中心，但文本保持左对齐（默认情况下，Bootstrap对所选类执行此操作）。

查看CodePen以获取完整代码。

这是其中一个块引用的HTML（例如）：

  <blockquote>
  <p>A wise man proportions his belief to the evidence.</p>
  <footer class="blockquote-footer"><cite>David Hume</cite></footer>
  </blockquote>

这是我为blockquotes添加的CSS：

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  width: 500px;
  margin: 3em 0;
  padding: 0.35em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
}

blockquote:before {
  display: block;
  padding-left: 10px;
  content: "\201C";
  font-size: 80px;
  /* An element with position: absolute; is positioned relative to the nearest positioned ancestor, which is probably the blockquote */
  position: absolute;
  /* Offsets from the edges of element's containing block, ancestor to which the element is relatively positioned */
  left: -20px; /* Negative moves it left */
  top: -20px; /* Negative moves it toward the top */
  color: #7a7a7a;
}

blockquote cite {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}

Answer 1

为blockquote设置width ，您可以使用自动边距将其水平居中。

更新CSS *：

blockquote {
  margin: 3em auto !important;
}

更新的代码笔

*请注意，您的CSS被引导程序所取代。 您可以使用!important来纠正

Answer 2

您可以将auto添加到margin属性。 试试这个代码。

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  width: 500px;
  margin: 3em auto;
  padding: 0.35em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
}