我有一个相应居中的文本块，但由于某种原因它会向左转向！我认为这可能与我的最大宽度和最大高度有关，但我不完全确定。
@charset"utf-8";
/* CSS */
body {}
.top-content {
text-align: center;
}
header {
font-family: "Ostrich Sans Rounded", sans-serif;
font-size: 72px;
}
#quote {
font-style: italic;
font-size: 20px;
color: rgba(0, 0, 0, 0.5);
}
nav li {
display: inline-block;
font-size: 25px;
font-family: "Ostrich Sans Rounded", sans-serif;
color: #ffffff;
margin: 0px 48px 0px 48px;
}
nav {
position: static;
text-align: center;
background-color: #000000;
padding: 1px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.main-content {
text-align: center;
max-height: 100%;
max-width: 75%;
}
#table {
table-layout: fixed;
}
.pic-box {
width: 150px;
height: 150px;
margin: 5px;
}
span {
display: inline-block;
}<body>
<div class="top-content">
<header>John Simons</header>
<p id="quote">"Life Is Graphics"</p>
<article>
<p>I am a work-o-holic. There will never be a day that I am sitting around and not designing.
<br>In my spare time I enjoy taking walks, messing around with random design pieces, and hanging out with my flawless girlfriend(she told me to put that).</p>
</article>
</div>
<nav>
<ul>
<a href="">
<li>Home</li>
</a>
<a href="">
<li>About</li>
</a>
<a href="">
<li>Work</li>
</a>
<a href="">
<li>Projects</li>
</a>
<a href="">
<li>Contact</li>
</a>
</ul>
</nav>
<div class="main-content">
<article>
<p>I started designing when I was 13. Inspired by youtube videos, I began designing youtube channel layouts and from there my passion sparked. I couldn't stop. Everyday I was grinding to get my work out there. Even at a young age I was motivated to
become the world's best designer.
<br>
<br>My goal is to ignite that same spark that was ignited in me. I want to have a team of designers that share the same passion for graphic design.
<br>
<br>It would be a treat to work alongside fellow designers, making a difference, and showing people that "life is graphics."</p>
</article>
<div id="table">
<h3>My Work</h3>
<span class="section-1">
<figure>
<img src="../../Pictures/Portfolio/Faded Fridays.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Reach.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Growing Life.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Le's Do It.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Mountain Dew Design.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
</span>
<span class="section-2">
<figure>
<img src="../../Pictures/Portfolio/Faded Fridays.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Reach.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Growing Life.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Le's Do It.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Mountain Dew Design.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
</span><span class="section-2">
<figure>
<img src="../../Pictures/Portfolio/Faded Fridays.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Reach.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Growing Life.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Le's Do It.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Mountain Dew Design.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
</span>
<span class="section-2">
<figure>
<img src="../../Pictures/Portfolio/Faded Fridays.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Reach.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Growing Life.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Le's Do It.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Mountain Dew Design.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
</span>
</div>
</div>
</body>
</html>
答案 0 :(得分：4)
使用margin: 0 auto与main-content：
@charset"utf-8";
/* CSS */
body {} .top-content {
text-align: center;
}
header {
font-family: "Ostrich Sans Rounded", sans-serif;
font-size: 72px;
}
#quote {
font-style: italic;
font-size: 20px;
color: rgba(0, 0, 0, 0.5);
}
nav li {
display: inline-block;
font-size: 25px;
font-family: "Ostrich Sans Rounded", sans-serif;
color: #ffffff;
margin: 0px 48px 0px 48px;
}
nav {
position: static;
text-align: center;
background-color: #000000;
padding: 1px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.main-content {
text-align: center;
max-height: 100%;
max-width: 75%;
margin: 0 auto;/*add margin 0 auto*/
}
#table {
table-layout: fixed;
}
.pic-box {
width: 150px;
height: 150px;
margin: 5px;
}
span {
display: inline-block;
}<body>
<div class="top-content">
<header>John Simons</header>
<p id="quote">"Life Is Graphics"</p>
<article>
<p>I am a work-o-holic. There will never be a day that I am sitting around and not designing.
<br>In my spare time I enjoy taking walks, messing around with random design pieces, and hanging out with my flawless girlfriend(she told me to put that).</p>
</article>
</div>
<nav>
<ul>
<a href="">
<li>Home</li>
</a>
<a href="">
<li>About</li>
</a>
<a href="">
<li>Work</li>
</a>
<a href="">
<li>Projects</li>
</a>
<a href="">
<li>Contact</li>
</a>
</ul>
</nav>
<div class="main-content">
<article>
<p>I started designing when I was 13. Inspired by youtube videos, I began designing youtube channel layouts and from there my passion sparked. I couldn't stop. Everyday I was grinding to get my work out there. Even at a young age I was motivated to
become the world's best designer.
<br>
<br>My goal is to ignite that same spark that was ignited in me. I want to have a team of designers that share the same passion for graphic design.
<br>
<br>It would be a treat to work alongside fellow designers, making a difference, and showing people that "life is graphics."</p>
</article>
<div id="table">
<h3>My Work</h3>
<span class="section-1">
<figure>
<img src="../../Pictures/Portfolio/Faded Fridays.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Reach.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Growing Life.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Le's Do It.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Mountain Dew Design.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
</span>
<span class="section-2">
<figure>
<img src="../../Pictures/Portfolio/Faded Fridays.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Reach.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Growing Life.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Le's Do It.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Mountain Dew Design.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
</span><span class="section-2">
<figure>
<img src="../../Pictures/Portfolio/Faded Fridays.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Reach.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Growing Life.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Le's Do It.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Mountain Dew Design.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
</span>
<span class="section-2">
<figure>
<img src="../../Pictures/Portfolio/Faded Fridays.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Reach.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Growing Life.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Le's Do It.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
<figure>
<img src="../../Pictures/Portfolio/Mountain Dew Design.jpg" alt="Faded Friday's EP Cover" class="pic-box" />
</figure>
</span>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
max-width: 75%; margin: 0 auto;，这可能是你想要的。答案 2 :(得分：0)
将margin: 0 auto;添加到.main-content