html - 图像和居中问题

Question

尝试过 MDN Docs / w3 Schools - 也许我错过了它，但我无法弄清楚为什么我的图像大小不一样（只有技能部分）云和山脉很好。

我的“全栈开发人员”也不再以我的名字为中心。

我试过边距、填充、文本对齐、居中等

无法弄清楚我哪里出错了 - 在我破坏它之前没有正确地回到版本控制。

.top-container {
  background-color: #ffcb74;
}

body {
  margin: auto;
  margin-top: 0;
  text-align: center;
  background-color: white;
}

img {
  border-radius: 50%;
  height: auto;
}

h1 {
  margin: 0;
  position: static;
  font-family: 'Comfortaa', cursive;
  padding-top: 10%;
  color: #66BFBF;
  line-height: 2;
}

h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem;
  color: #66BFBF;
  font-weight: normal;
  text-align: left;
  margin-left: 25%;
}

h3 {
  color: #11999E;
}

a {
  color: #11999E;
}

.get-in-touch {
  text-align: left;
  margin: auto;
}

.fsd {
  margin-right: 50%;
}


.contact-me {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.bottom-container {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.footer-link {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}


.skill-row {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.hello-part {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.bottom-cloud {
  position: absolute;
}

.top-cloud {
  position: absolute;
  right: 305px;
}

.my-skills {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.webdev-Image {
  width: 25%;
}

<div class="top-container">
    <img class="top-cloud" src="cloud.png" alt="clouds-img">
    <h1>I'm Malcolm Henry</h1>
    <h2 class="fsd">a full stack developer</h2>
    <img class="bottom-cloud" src="cloud.png" alt="clouds-img">
    <img src="mountain.png" alt="mountain-img">
  </div>

  <br>

  <div class="middle-container">
    <div class="profile">
      <img class=""src="" alt="">
      <h2>Hello.</h2>
      <p class="hello-part">Lorem ipsum dolor sit amet, vitae volutpat, dui conubia, dolor urna. Non auctor, montes nulla distinctio.</p>
    </div>

    <div class="skills">
      <h2>My Skills.</h2>
      <div class="my-skills">
        <img class="coding-Image" src="Skills.png" alt="Skills Image">
        <h3>Lorem & Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
      </div>
      <div class="skill-row">
        <img class="webdev-Image" src="web dev.jpeg" alt="2020 Web Dev Image">
        <h3>Lorem Ipsum Dolor</h3>
        <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
      </div>
    </div>
    <br>
    <div class="contact-me">
      <h2 class="get-in-touch">Get In Touch</h2>
      <h3>Lorem ipsum dolor sit amet, non elit.</h3>
      <p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
      <a class="btn" href="mailto:[e-mail]">CONTACT ME</a>
    </div>
  </div>


  <div class="bottom-container">
    <a class="footer-link" href="https://www.linkedin.com/in/malcolm-henry-099305168/">LinkedIn</a>
    <a class="footer-link" href="https://twitter.com/">Twitter</a>
    <p>© 2020 Malcolm Henry.</p>
  </div>

标签： htmlcss

Answer 1

“全栈开发人员”没有居中，因为您在 h2 中为它提供了 25% 的边距，在 fsd 中为它提供了 50% 的边距。

技能中的照片大小不同，因为您给一个类别的类别webdev-Image和另一个类别的类别coding-Image，这是未定义的。

纠正这些项目的一种方法如下所示：

.top-container {
  background-color: #ffcb74;
}

body {
  margin: auto;
  margin-top: 0;
  text-align: center;
  background-color: white;
}

img {
  border-radius: 50%;
  height: auto;
}

h1 {
  margin: 0;
  position: static;
  font-family: 'Comfortaa', cursive;
  padding-top: 10%;
  color: #66BFBF;
  line-height: 2;
}

h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem;
  color: #66BFBF;
  font-weight: normal;
  text-align: left;
  margin-left: 25%;
}

h3 {
  color: #11999E;
}

a {
  color: #11999E;
}

.get-in-touch {
  text-align: left;
  margin: auto;
}

.fsd {
  margin-left: 0%;
  width: 100%;
  text-align: center;
}


.contact-me {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.bottom-container {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.footer-link {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}


.skill-row {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.hello-part {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.bottom-cloud {
  position: absolute;
}

.top-cloud {
  position: absolute;
  right: 305px;
}

.my-skills {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.webdev-Image {
  width: 25%;
}

<div class="top-container">
  <img class="top-cloud" src="https://picsum.photos/100/100" alt="clouds-img">
  <h1>I'm Malcolm Henry</h1>
  <h2 class="fsd">a full stack developer</h2>
  <img class="bottom-cloud" src="https://picsum.photos/100/100" alt="clouds-img">
  <img src="https://picsum.photos/100/100" alt="mountain-img">
</div>

<br>

<div class="middle-container">
  <div class="profile">
    <img class="" src="" alt="">
    <h2>Hello.</h2>
    <p class="hello-part">Lorem ipsum dolor sit amet, vitae volutpat, dui conubia, dolor urna. Non auctor, montes nulla distinctio.</p>
  </div>

  <div class="skills">
    <h2>My Skills.</h2>
    <div class="my-skills">
      <img class="webdev-Image" src="https://picsum.photos/100/100" alt="Skills Image">
      <h3>Lorem & Ipsum</h3>
      <p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
    </div>
    <div class="skill-row">
      <img class="webdev-Image" src="https://picsum.photos/100/100" alt="2020 Web Dev Image">
      <h3>Lorem Ipsum Dolor</h3>
      <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
    </div>
  </div>
  <br>
  <div class="contact-me">
    <h2 class="get-in-touch">Get In Touch</h2>
    <h3>Lorem ipsum dolor sit amet, non elit.</h3>
    <p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
    <a class="btn" href="mailto:[e-mail]">CONTACT ME</a>
  </div>
</div>


<div class="bottom-container">
  <a class="footer-link" href="https://www.linkedin.com/in/malcolm-henry-099305168/">LinkedIn</a>
  <a class="footer-link" href="https://twitter.com/">Twitter</a>
  <p>© 2020 Malcolm Henry.</p>
</div>