你如何使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的底部？

回答

相關問題