How to align content of a div to the bottom

后端 未结 26 2502
挽巷
挽巷 2020-11-22 01:13

Say I have the following CSS and HTML code:

26条回答
  •  轻奢々
    轻奢々 (楼主)
    2020-11-22 02:01

    The modern way to do it would be using flexbox. See the example below. You don't even need to wrap Some text... into any HTML tag, since text directly contained in a flex container is wrapped in an anonymous flex item.

    header {
      border: 1px solid blue;
      height: 150px;
      display: flex;                   /* defines flexbox */
      flex-direction: column;          /* top to bottom */
      justify-content: space-between;  /* first item at start, last at end */
    }
    h1 {
      margin: 0;
    }

    Header title

    Some text aligns to the bottom

    If there is only some text and you want to align vertically to the bottom of the container.

    section {
      border: 1px solid blue;
      height: 150px;
      display: flex;                   /* defines flexbox */
      align-items: flex-end;           /* bottom of the box */
    }
    Some text aligns to the bottom

提交回复
热议问题