居中引用，但保持文本左對齊

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