Question

我一直在尝试将文字放在背景图片上以获取页面元素（id =＆＃34; blogheader＆＃34;），但我似乎无法将文字放在底部的div。我尝试过一些东西，包括＆＃39; vertical-align：bottom＆＃39;和vertical-align：text-bottom＆＃39;。

我认为有些东西我只是缺失或者更容易获得我想要的结果，但我仍然在学习如何正确编码！：）

这是HTML：

<main id="blogpage">
            <h2 id="blogheader">The Blog!</h2>

            <div id="popblogs">Most Popular Blogs</div>
            <div id="recentblogs">Most Recent Blogs</div>

            <section>
                <article id="art1">
                    <h3>Topic One</h3>
                </article>
            </section>
</main>

CSS：

#blogheader         {clear: both;
                    text-align: center;
                    background-image: url(Photos/image.jpg);
                    background-repeat: no-repeat;
                    background-size: 100%;
                    margin: 0;
                    font-size: 5em;
                    color: #00c3d5;
                    height: 400px;
                    vertical-align: text-bottom;}

此外，任何代码批评都会受到高度赞赏，因为我正在学习所有这些课程，并且获得一些专家建议并不会受到伤害！

Answer 1

要将文字放在元素的底部，您可以将display: flex;分配给#blogheader，然后justify-content: center;将水平分配子文本，align-items: flex-end;推送子文本到flex-end / bottom。

＆＃13;

#blogheader {
  clear: both;
  text-align: center;
  background-image: url(Photos/image.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0;
  font-size: 5em;
  color: #00c3d5;
  height: 400px;
  vertical-align: text-bottom;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

＆＃13;

<main id="blogpage">
            <h2 id="blogheader">The Blog!</h2>

            <div id="popblogs">Most Popular Blogs</div>
            <div id="recentblogs">Most Recent Blogs</div>

            <section>
                <article id="art1">
                    <h3>Topic One</h3>
                </article>
            </section>
</main>

＆＃13;

Answer 2

您可以使用display：table-cell或flex：

柔性

#blogheader {
  clear: both;
  text-align: center;
  background-image: url(Photos/image.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0;
  font-size: 5em;
  color: #00c3d5;
  /* send content down */
  height: 400px;display:flex;
  flex-flow:column;
  justify-content:flex-end;
}

<main id="blogpage">
  <h2 id="blogheader">The Blog!</h2>

  <div id="popblogs">Most Popular Blogs</div>
  <div id="recentblogs">Most Recent Blogs</div>

  <section>
    <article id="art1">
      <h3>Topic One</h3>
    </article>
  </section>
</main>

表细胞

#blogheader {
  clear: both;
  text-align: center;
  background-image: url(Photos/image.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 0;
  font-size: 5em;
  color: #00c3d5;
  height: 400px;
  /* send content down */
  display:table-cell;
  vertical-align:bottom;
}

<main id="blogpage">
  <h2 id="blogheader">The Blog!</h2>

  <div id="popblogs">Most Popular Blogs</div>
  <div id="recentblogs">Most Recent Blogs</div>

  <section>
    <article id="art1">
      <h3>Topic One</h3>
    </article>
  </section>
</main>

你如何让div中的文本位于div的底部？

2 个答案: