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

Question

我网站的link是：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;。

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

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

Positioning about me section on my website

html

css

stylus

pug