中心块引用但保持文本左对齐答案

【问题标题】：Center blockquote but keep text left-aligned中心块引用但保持文本左对齐
【发布时间】：2018-04-11 13:11:33
【问题描述】：

我用 Bootstrap 和 CSS 创建了一个简单的页面。我希望我的两个块引用在页面上居中，但文本保持左对齐（默认情况下，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>

这是我为块引用添加的 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;
}

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

由于您已将blockquote 指定为width，因此您可以使用自动边距将其水平居中。

更新您的 CSS*：

blockquote {
  margin: 3em auto !important;
}

updated codepen

*请注意，您的 CSS 已被引导程序否决。您可以使用!important 来纠正该问题

【讨论】：

【解决方案2】：

您可以将自动添加到您的边距属性。试试这个代码。

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

【讨论】：