我无法使用 Flexbox 将段落及其下方的文本居中

问题描述 投票：0回答：1

您好，我目前正在开发 freecodecamp 致敬页面上的一个简单项目。我想做

我试图将段落和标题居中而不移动导航栏。我尝试使用 Flexbox 我还很新。

我还想稍后将我的图像居中。我的文本对齐不起作用我也尝试过。

这是 HTML 和 CSS：

body {
  background: white;
  font-family: Fira Code;
  margin: 0;
}

main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}

header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.center-h1 {
  width: 100%;
  display: flex;
  justify-content: center;
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding-inline-start: 0;
  margin-block: 0;
}

nav ul li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}

nav ul li:hover {
  background-color: #dfdfe2;
  color: #606096;
  cursor: pointer;
}

li a {
  color: #606096;
  text-decoration: none;
}

#image {
  display: block;
  padding-top: 100px;
  margin-right: auto;
  margin-left: auto;
  width: 60%;
}

#img-caption {
  text-align: center;
  padding-top: 10px;
  font-size: 13px;
}

.tribute-info {
  text-align: center;
  margin: auto;
  padding: 20px;
  background-color: #dfdfe2;
}
<main id="main">
  <header>
    <div class="center-h1">
      <h1 id="title">Paragraph Center</h1>
    </div>
    <nav>
      <ul>
        <li><a href="#">INFO</a></li>
        <li><a href="#">Accomplishments</a></li>
      </ul>
    </nav>
  </header>

  <section class="main-part">
    <div class="img-div">
      <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Photo of Pepe">
      <figcaption id="img-caption">Paragraph from the left 3 third.</figcaption>
    </div>
  </section>

  <section id="tribute-info" class="tribute-info">
    <div class="section-header">
      <h2>Here's a time line of Pepe's Life:</h2>
    </div>
    <div class="unordered-list">
      <ul>
        <li><strong>2000</strong> - P Born</li>
        <li><strong>2000</strong> - P Born</li>
        <li><strong>2000</strong> - P Born</li>
        <li><strong>2000</strong> - P Born</li>
        <li><strong>2000</strong> - P Born</li>
      </ul>
    </div>
    <p>If you want to learn more : <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia</a></p>
  </section>
</main>

html css
1个回答
0
投票

你无法真正将这样的东西居中。 

h1
可以在其容器内居中，但如果其容器从左侧移动到 
nav
元素，则很难相对于整个页面的宽度居中。解决方法是将 
position: absolute;
应用于 
h1
，然后我们会遇到这样的问题：如果页面不够宽，
h1
和 
nav
会重叠。

因此，最好的解决方案是将导航放置在文本上方或下方，或者决定将导航放置在右侧，将文本放置在左侧，并将显示柔性设置为柔性方向列并将内容对齐设置为空格 -之间。

您在 HTML 语义方面做得非常好，但仍然有一些过多的包装器，并且图像和 Figcaption 位于一个部分而不是 figure 标签中。

还有一点需要注意的是header、main、footer的使用。您不应该将它们嵌入彼此内部。 body 元素应该包含一个位于彼此下方的 header、main 和 footer 元素。页眉包含导航，主要包含页面内容，页脚是为了在页面底部放置一些链接或文本。

body {
  background: white;
  font-family: Fira Code;
  margin: 0;
}

main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}

header {
  height: 50px;
  align-items: right;
}

#title {
  width: 100%;
  display: flex;
  justify-content: center;
}

nav {
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding-inline-start: 0;
  margin-block: 0;
  float: right;
}

nav>a {
  color: #606096;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}

nav>a:hover {
  background-color: #dfdfe2;
  color: #606096;
  cursor: pointer;
}

figure#pepe-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

figure#pepe-image>image {
  padding-top: 100px;
  width: 60%;
}

figure#pepe-image>figcaption {
  text-align: center;
  padding-top: 10px;
  font-size: 13px;
}

.tribute-info {
  text-align: center;
  margin: auto;
  padding: 20px;
  background-color: #dfdfe2;
}

footer {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #eee;
}
<html>

<head>
  <title>Pepe's life</title>
</head>

<body>
  <header>
    <h1 id="title">Paragraph Center</h1>
    <nav>
      <a href="#">Info</a>
      <a href="#">Accomplishments</a>
    </nav>
  </header>

  <main>
    <figure id="pepe-image">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="Photo of Pepe">
      <figcaption>Paragraph from the left 3 third.</figcaption>
    </figure>

    <section class="tribute-info">
      <h2>Here's a time line of Pepe's Life:</h2>
      <ul>
        <li><strong>2000</strong> - P Born</li>
        <li><strong>2000</strong> - P Born</li>
        <li><strong>2000</strong> - P Born</li>
        <li><strong>2000</strong> - P Born</li>
        <li><strong>2000</strong> - P Born</li>
      </ul>
      <p>If you want to learn more: <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia</a></p>
    </section>
  </main>
  <footer>Coder Pirate © 2024</footer>
</body>

</html>

如果您有任何疑问或者这不能回答您的问题，请留言并告诉我！我还想说，欢迎来到 Stack Overflow。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.