html - 如何居中对齐页面上的元素？

标签 html css centering figure

我有一个相应居中的文本 block ，但由于某种原因它一直向左转向!我认为这可能与我的最大宽度和最大高度有关，但我不完全确定。

@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>

fiddle

最佳答案

使用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>

关于html - 如何居中对齐页面上的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26537789/

上一篇：html - 如何将 3 个不同的段落并排放置？

下一篇：css - JavaFX:您可以使用 CSS 定义 TextField 的最大宽度/高度吗？

相关文章：

javascript - Materialise closeModal 未触发完成

html - 背景由于某种原因被分割

javascript - 在网页上平滑滚动

html - 居中问题

html - 如何快速删除字符串中的所有html

jquery - CSS3 形状和动画 - 箭头

html - CSS Grid 4 列布局，<dl> 有 2 个列标题

html - 即使溢出容器也能保持元素居中

html - 如何使用 960 网格系统将网格居中

css - 如何使用 overflow-y : auto? 使绝对 div 扩展到包装器之外

©2024 IT工具网  联系我们