你如何使div中的文本坐在div的底部？

我一直在尝试将文本置于页面元素（id =“blogheader”）的背景图像上，但我似乎无法让文本坐在div的底部。我已经尝试了一些东西，包括'vertical-align：bottom'和vertical-align：text-bottom'。你如何使div中的文本坐在div的底部？

我觉得有一些我只是缺少或更容易的方法来获得我想要的结果，但我仍然在学习如何正确编码！ :)

这里的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;}

此外，任何代码的批评，将不胜感激，因为我是在一门课程目前正在学习这一切的东西，它不伤害有一些专家的意见！

来源

2017-01-09 Giovanni

https://css-tricks.com/what-is-vertical-align/这不是垂直对齐呢，你能创建你是否看过['position：fixed']（https://developer.mozilla.org/en-US/docs/Web/CSS/position） –

？我不确定你想要做什么。 – happymacarts

您可以使用显示：表单元格或柔性：

柔性

#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>

来源

2017-01-09 22:58:05

非常感谢您的帮助！欣赏它！ – Giovanni

把文本的元素的底部，你可以分配到display: flex;和#blogheader然后justify-content: center;水平居中子文本，并align-items: flex-end;孩子文本推到柔性端/底部。

#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; 
 
}

<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>

来源

2017-01-09 22:57:18

你如何使div中的文本坐在div的底部？

回答

相关问题