容器未完全居中
Container not completely centered
我正在尝试构建一个随机报价生成器网站，但报价容器似乎没有完全居中。在将页面调整为移动设备大小时，您会注意到这一点。我应该添加哪一行代码以使其完全居中？我将在下面留下代码片段，以便您自己查看问题。非常感谢。
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@100&display=swap');
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background-color: #e1967b;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23575658' fill-opacity='0.16'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
color: #000;
font-family: Fraunces, san-serif;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.quote-container {
margin: 0 auto;
width: auto;
max-width: 900px;
padding: 20px 30px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
}
.quote-text {
font-size: 2.75rem;
}
.long-quote {
font-size: 2rem;
}
.fa-quote-left {
font-size: 4rem;
}
.quote-author {
margin-top: 15px;
font-size: 2rem;
font-weight: 400;
font-style: italic;
}
/* Media Query: tablet or smaller */
@media screen and (max-width: 1000px) {
.quote-container {
margin: auto 10px;
}
.quote-text {
font-size: 2.5rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Generator</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quote-container" id="quote-container">
<!-- Quote -->
<div class="quote-text">
<i class="fas fa-quote-left"></i>
<span id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
<!-- Author -->
<div class="quote-author">
<span id="author">Buddha</span>
</div>
<!-- Button -->
<div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet quote">
<i class="fab fa-twitter"></i>
</button>
<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Script -->
<i class="far fa-brain"></i>
<script src="script.js"></script>
</body>
</html>
我试过了，现在可以了。您将在“qoute text”和“long quote”中对齐它，并且您还必须将 with 从 auto 更改为 500；
检查以下修正案：
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@100&display=swap');
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background-color: #e1967b;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23575658' fill-opacity='0.16'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
color: #000;
font-family: Fraunces, san-serif;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.quote-container {
margin: 0 auto;
width: 200;
max-width: 700px;
padding: 20px 30px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
}
.quote-text {
font-size: 2.75rem;
text-align: center;
}
.long-quote {
font-size: 2rem;
text-align: center;
}
.fa-quote-left {
font-size: 4rem;
}
.quote-author {
margin-top: 15px;
font-size: 2rem;
font-weight: 400;
font-style: italic;
}
/* Media Query: tablet or smaller */
@media screen and (max-width: 800px) {
.quote-container {
margin: auto 10px;
}
.quote-text {
font-size: 2.5rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Generator</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quote-container" id="quote-container">
<!-- Quote -->
<div class="quote-text">
<i class="fas fa-quote-left"></i>
<span id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
<!-- Author -->
<div class="quote-author">
<span id="author">Buddha</span>
</div>
<!-- Button -->
<div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet quote">
<i class="fab fa-twitter"></i>
</button>
<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Script -->
<i class="far fa-brain"></i>
<script src="script.js"></script>
</body>
</html>
好像我有一行无用的代码，我忘记了 <i class="far fa-brain"></i> 并且它正在使用 space.
的字符
我正在尝试构建一个随机报价生成器网站，但报价容器似乎没有完全居中。在将页面调整为移动设备大小时，您会注意到这一点。我应该添加哪一行代码以使其完全居中？我将在下面留下代码片段，以便您自己查看问题。非常感谢。
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@100&display=swap');
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background-color: #e1967b;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23575658' fill-opacity='0.16'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
color: #000;
font-family: Fraunces, san-serif;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.quote-container {
margin: 0 auto;
width: auto;
max-width: 900px;
padding: 20px 30px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
}
.quote-text {
font-size: 2.75rem;
}
.long-quote {
font-size: 2rem;
}
.fa-quote-left {
font-size: 4rem;
}
.quote-author {
margin-top: 15px;
font-size: 2rem;
font-weight: 400;
font-style: italic;
}
/* Media Query: tablet or smaller */
@media screen and (max-width: 1000px) {
.quote-container {
margin: auto 10px;
}
.quote-text {
font-size: 2.5rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Generator</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quote-container" id="quote-container">
<!-- Quote -->
<div class="quote-text">
<i class="fas fa-quote-left"></i>
<span id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
<!-- Author -->
<div class="quote-author">
<span id="author">Buddha</span>
</div>
<!-- Button -->
<div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet quote">
<i class="fab fa-twitter"></i>
</button>
<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Script -->
<i class="far fa-brain"></i>
<script src="script.js"></script>
</body>
</html>
我试过了，现在可以了。您将在“qoute text”和“long quote”中对齐它，并且您还必须将 with 从 auto 更改为 500； 检查以下修正案：
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@100&display=swap');
html {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background-color: #e1967b;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23575658' fill-opacity='0.16'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
color: #000;
font-family: Fraunces, san-serif;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.quote-container {
margin: 0 auto;
width: 200;
max-width: 700px;
padding: 20px 30px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
}
.quote-text {
font-size: 2.75rem;
text-align: center;
}
.long-quote {
font-size: 2rem;
text-align: center;
}
.fa-quote-left {
font-size: 4rem;
}
.quote-author {
margin-top: 15px;
font-size: 2rem;
font-weight: 400;
font-style: italic;
}
/* Media Query: tablet or smaller */
@media screen and (max-width: 800px) {
.quote-container {
margin: auto 10px;
}
.quote-text {
font-size: 2.5rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Generator</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quote-container" id="quote-container">
<!-- Quote -->
<div class="quote-text">
<i class="fas fa-quote-left"></i>
<span id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>
<!-- Author -->
<div class="quote-author">
<span id="author">Buddha</span>
</div>
<!-- Button -->
<div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet quote">
<i class="fab fa-twitter"></i>
</button>
<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Script -->
<i class="far fa-brain"></i>
<script src="script.js"></script>
</body>
</html>
好像我有一行无用的代码，我忘记了 <i class="far fa-brain"></i> 并且它正在使用 space.