CSS vertical-align: text-bottom;

Question

Hi there I\'m trying to position text to the bottom of the

. Neither vertical-align:text-bottom; or vertical-align:bottom;<

Answer 1

Modern solution

Flexbox was created for exactly these kind of problems:

#container {
    height: 150px;/*Only for the demo.*/
    background-color:green;/*Only for the demo.*/
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

    Text align to center bottom.

Old school solution

If you don't want to mess with table displays, then you can create a

inside a relatively positioned parent container, place it to the bottom with absolute positioning, then make it 100% wide, so you can text-align it to the center:

#container {
    height: 150px;/*Only for the demo.*/
    background-color:green;/*Only for the demo.*/
    position: relative;
}

#text {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

    Text align to center bottom.

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...