将容器居中对齐
我试图将 .container 对齐到页面的中心，现在它只在左侧。 我尝试过“float:left”和“left:”，但这些都没有任何好处。 我正在寻找的是正确的对齐标签以使 .container 在中心对齐。 谢谢， 薄荷 
.container {
background-color: lightgrey;
padding: 1rem;
border-radius: .5rem;
width: 700px;
max-width: 90%;
}
.quote-display {
margin-bottom: 1rem;
margin-left: calc(1rem + 2px);
margin-right: calc(1rem + 2px);
}
.quote-input {
background-color: transparent;
border: 2px solid red;
width: 100%;
height: 8rem;
margin: auto;
resize: none;
padding: .5rem 1rem;
font-size: 1rem;
border-radius: .5rem;
}
.quote-input:focus {
border-color: black;
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<div class="main">
<div id="title">
<h1 style="margin: 0;">Typerore</h1>
</div>
<div class="timer" id="timer"></div>
<div class="container">
<div class="quote-display" id="quoteDisplay"></div>
<textarea id="quoteInput" class="quote-input" autofocus></textarea>
</div>
</div>I am trying to align .container to the center of the page, right now it is only going on the left side.
I have tried "float:left" as well as "left:" Neither of these did me any good.
What I am looking for is the correct alignment tag to get .container aligned in the center.
Thanks,
Mint
.container {
background-color: lightgrey;
padding: 1rem;
border-radius: .5rem;
width: 700px;
max-width: 90%;
}
.quote-display {
margin-bottom: 1rem;
margin-left: calc(1rem + 2px);
margin-right: calc(1rem + 2px);
}
.quote-input {
background-color: transparent;
border: 2px solid red;
width: 100%;
height: 8rem;
margin: auto;
resize: none;
padding: .5rem 1rem;
font-size: 1rem;
border-radius: .5rem;
}
.quote-input:focus {
border-color: black;
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<div class="main">
<div id="title">
<h1 style="margin: 0;">Typerore</h1>
</div>
<div class="timer" id="timer"></div>
<div class="container">
<div class="quote-display" id="quoteDisplay"></div>
<textarea id="quoteInput" class="quote-input" autofocus></textarea>
</div>
</div>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果我是你，我会研究 Flexbox。解决您的问题的方法是在容器周围添加一个包装器并对其进行以下样式设置：
也许是这样的： https://jsfiddle.net/s35x607o/1/
要获得更多真正精彩的阅读内容，请查看 https://css-tricks.com/snippets/css/a-guide -到弹性盒/
If I were you I would look into Flexbox. A solution to your problem would be to add a wrapper around your container and do this styling on it:
Maybe something like this: https://jsfiddle.net/s35x607o/1/
For more really nice reading, check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/