我使用Bootstrap创建了一个简单的页面，并希望在移动响应时将我的blockquotes（包括添加了CSS伪选择器的左引号）置于中心位置。
此外，我尝试将blockquote设置为在CSS中具有500px的宽度，并使其在我的笔记本电脑上看起来正确，但导致引用文本在移动设备上移出页面而不是按比例缩小。所以我删除了宽度声明。
CodePen（请注意引号出现在CodePen的不同位置而不是我的浏览器）
这是我目前关于blockquote的CSS和相应的引号：
blockquote {
font-family: Georgia, serif;
font-style: italic;
margin: 3em auto;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote p {
font-size: 1em !important;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 3em;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -3px; /* Negative moves it left */
top: -13px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
}
答案 0 :(得分：0)
将display: inline-block;text-align: left;添加到blockquote以及text-align: center;添加到.jumbotron：
body {
margin-top: 3em;
font-family: Helvetica;
}
h1 {
text-transform: uppercase;
}
img {
width: 90%;
}
.panel img {
height: 400px;
width: auto;
}
.panel h4 {
font-size: 10px;
}
.jumbotron {
text-align: center;
}
.jumbotron blockquote {
font-family: Georgia, serif;
font-style: italic;
margin: 3em auto;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
display: inline-block;
text-align: left;
}
blockquote p {
font-size: 1em !important;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 3em;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -3px; /* Negative moves it left */
top: -13px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
}
ul {
list-style: none;
text-align: left;
/* Bottom set to 3em to match margin above ul created by blockquote */
margin: 0 auto 3em auto;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>David Hume</title>
<!-- Ensures proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Provides a responsive, fixed-width container. Needed as outermost wrapper in order for Bootstrap grid system to work correctly -->
<div class="container">
<!-- Big grey box for calling extra attention to content -->
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<div class="text-center">
<h1>David Hume</h1>
<h4>Scottish Enlightenment Philosopher, Historian, Economist, Essayist</h4>
<div class="thumbnail">
<img src="https://cdn.theatlantic.com/assets/media/img/2015/09/03/BOB_Essay_Opener_WEBCrop/1920.jpg?1441298243" alt="Portrait of David Hume">
<div class="caption">"Portrait of David Hume," 1754, by Allan Ramsay</div>
</div>
</div> <!-- End of text-center div -->
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
<footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>
</div> <!-- End of col-xs-12 div -->
</div> <!-- End of row div -->
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<h4 class="text-center">A brief timeline in events of David Hume's life:</h4>
<ul>
<li><strong>1711</strong> – Born as David Home in Edinburgh, Scotland</li>
<li><strong>1713</strong> – Father dies</li>
<li><strong>1723</strong> – Enrolls at University of Edinburgh at the age of 12 (14 was typical)</li>
<li><strong>1734</strong> – Changes surname to Hume</li>
<li><strong>1739</strong> – Publishes Books 1 and 2 of <em>A Treatise on Human Nature</em></li>
<li><strong>1748</strong> – Publishes <em>An Enquiry Concerning Human Understanding</em></li>
<li><strong>1751</strong> – Publishes <em>An Enquiry Concerning the Principles of Morals</em></li>
<li><strong>1776</strong> – Dies at the age of 65</li>
</ul>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center">Works</h3>
</div>
<div class="panel-body">
<div class="row text-center">
<div class="col-md-6">
<h5>An Enquiry Concerning Human Understanding</h5>
<img src="https://images-na.ssl-images-amazon.com/images/I/51RE8VsWyGL.jpg" alt="An Enquiry Concerning Human Understanding">
<br><br>
<h5>An Enquiry Concerning Human Understanding</h5>
<img src="https://images-na.ssl-images-amazon.com/images/I/51RE8VsWyGL.jpg" alt="An Enquiry Concerning Human Understanding">
</div>
<div class="col-md-6">
<h5>Dialogues Concerning Natural Religion</h5>
<img src="https://images-na.ssl-images-amazon.com/images/I/51RE8VsWyGL.jpg" alt="Dialogues Concerning Natural Religion">
<br><br>
<h5>An Enquiry Concerning Human Understanding</h5>
<img src="https://images-na.ssl-images-amazon.com/images/I/51RE8VsWyGL.jpg" alt="An Enquiry Concerning Human Understanding">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<blockquote>
<p>Were it not for his infidel writings, every body would love him.</p>
<footer class="blockquote-footer"><cite>James Boswell</cite></footer>
</blockquote>
<h4 class="text-center">Learn more on <a href="https://en.wikipedia.org/wiki/David_Hume" target="_blank">Wikipedia</a>.</h4>
</div>
</div>
</div>
</div>
<footer class="text-center">
<hr>
<p>Written and coded by <a href="https://www.linkedin.com/in/natalie-cardot/" target="_blank">Natalie Cardot</a></p>
</footer>
</div>
</body>
</html>