Question

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

注意代码是玉和手写笔，你可以用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中对齐文本，您需要添加两件事：

在CSS中添加#about h1, p { vertical-align:middle; }会让它在div中沿着垂直轴居中对齐。

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

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

这会告诉您在div中间对齐的h1和p元素。

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

<小时/> 如果没有完整的代码和你指定的内容，这是最好的解释，希望这有帮助。

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

1 个答案: