html - 在我的网站上定位关于我的部分

Question

我网站的链接是:mckelvey.me:1122 .我在定位“关于我”部分时遇到问题。它有一个无法正确缩放的图像，应该是#about 的全高和左侧宽度约为 40% 的图像。标题和段落需要在其余宽度的右侧水平和垂直居中。

请注意，代码是在 jade 和 stylus 中，如果你喜欢它们非常接近，你可以在 html 和 css 中回答:

.about
    min-height 50vh
    background #1F7D5B
    color #f7f7f7
  h1
      font-size 1.5em
      font-weight 600
      color #232323
      text-align center
      padding .5em 0
      float right
      width 100%

  p
      font-size 1em
      font-weight 100
      max-width 50em
      text-align center
      line-height 150%

  img
      float left
      width 18em
      height 18em

.wrap
    float right

jade/html 是:

 #about
  .about
    img(src="/img/abstract.jpg")
    .wrap
      h1 About Me
      p Hello, I'm a Designer, Front-end Developer and of course a Tea Enthusiast. It is my mission to program simple and elegant, responsive websites while under the influence of tea.

Answer 1

如果不显示您直接使用的代码，这很难做到，所以我会尝试逐个分解。

---

要修复图像完全不适合 div 您可以将以下内容添加到您的 CSS:

#about img { width:40%; max-height:100%; }

添加这个会告诉 id (#) 中的任何图像大约是宽度的 40%(如您指定的那样)，然后使高度与其成比例。

---

要对齐 div 中的文本，您需要添加两件事:

添加#about h1, p { vertical-align:middle; 到您的 CSS 告诉它在您的 div 中沿垂直轴居中对齐。

要水平对齐下一个，您需要添加:

#about h1, p {padding-left:auto; padding-right:auto;}

这告诉 h1 和 p 元素你曾经在你的 div 的中间对齐。

旁注:这可能会导致您的文本从您的 div 中溢出，因此请将 text align 属性添加到您的 CSS 中以解决此问题。示例:text-align:justify;。

---

这是没有完整代码和您指定内容的最佳解释，希望对您有所帮助。