css 如何在父div中顶部对齐子div [关闭]

sz81bmfz 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(152)

**已关闭。**此问题需要debugging details。目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答问题。
昨天就关门了。
Improve this question的
我在CSS中对齐时遇到了问题。我在这里有：https://jsfiddle.net/kay297/snvfubkp/2/我想用下图中的布局制作一个“关于我”页面：Sample about me website
我的HTML：

<html lang="en">
    <head>
      <title>homepage</title>
    </head>
    <body>
          <div id="container">
            <div class="block"></div>
            <div class="text-container1">
              <div class="header">This is me</div>
              <div class="description1">Hi this is the description part</div>
            </div>
          </div>
    </body>
</html>

字符串
我的CSS：

#container {
    width: 100%;
    height: 400px;
    white-space: nowrap;
}
.block {
    width: 225px;
    height: 400px;
    margin-left: 2%;
    margin-right: 5%;
    display: inline-block;
    background-color: red;
}
.text-container1 {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}
.header {
    vertical-align: top;
}
.description {
    vertical-align: middle;
}

型
在我所拥有的内容中，红色块是图像的占位符。在右侧，即使我为header类添加了vertical-align: top，为description类添加了vertical-align: middle，它们仍然位于容器或文本容器的底部。我希望标题位于顶部居中，描述位于中间居中。
有谁能告诉我这一点吗？

css

来源：https://stackoverflow.com/questions/77774496/how-to-top-align-child-divs-in-parent-divs

2条答案

按热度按时间

aamkag611#

这是你想要的正确的CSS命令：

vertical-align: top

字符串
我认为你只是把它应用到了错误的div上。下面是你的jsfiddle纠正：
https://jsfiddle.net/zj8293ru/

赞(0）回复(0）举报 2024-01-09

vddsk6oq2#

你需要像这样的html：

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>homepage</title>
    </head>
    <body>
          <div id="container">
            <div class="block"></div>
            <div class="text-container1">
              <div class="header">This is me</div>
              <div class="description1">Hi this is the description part</div>
            </div>
          </div>
    </body>
</html>

字符串
CSS：

#container {
    width: 100%;
    height: 400px;
    white-space: nowrap;
    display: inline-flex;
}
.block {
    width: 225px;
    height: 400px;
    margin-left: 2%;
    margin-right: 5%;
    display: inline-block;
    background-color: red;
}
.text-container1 {
    white-space: normal;
}

型
如果你用<h1>替换header，用<p>替换addition1，页面看起来就像下面的例子。

赞(0）回复(0）举报 2024-01-09

我来回答

css 如何在父div中顶部对齐子div [关闭]

2条答案

相关问题

热门标签

最新问答