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

Question

I created a simple page with Bootstrap and CSS. I would like my two blockquotes to be centered on the page but with the text kept left-aligned (which Bootstrap does by default for the classes selected).

View CodePen for full code.

This is the HTML of one of the blockquotes (as an example):

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

Here's the CSS I added for my blockquotes:

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

As you've given the blockquote a width , you can use auto margins to horizontally center it.

Updating your CSS*:

blockquote {
  margin: 3em auto !important;
}

updated codepen

*Note that your CSS is being overruled by bootstrap. You can use !important to rectify that

Answer 2

You can add auto to your margin attribute. Try this code.

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