Question

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

查看CodePen以获取完整代码。

这是其中一个blockquotes的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;
}

updated codepen

*请注意，你的CSS被bootstrap否决了。您可以使用!important来纠正

Answer 2

您可以将自动添加到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;
}

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

2 个答案: