css如何控制文字垂直居底

html-css05

css如何控制文字垂直居底,第1张

你说的文字居于底部是指浏览器底部么，如果是的话，需要用到CSS属性position，而position: fixed就是相对于浏览器进行定位的，让后用left, right, bottom, top这些坐标值来进行指定位置，底部就是bottom: 0，所以让文字垂直居底就像下面这个例子一样：

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <style>

            #footer{

                position: fixed

                bottom: 0

                width: 100%

                text-align: center

            }

        </style>

    </head>

    <body>

        <div id="footer">垂直居于底部的文字</div>

    </body>

</html>

这个例子里还假设你是除了需要垂直居底以外，还需要居中设置，因此那个width:100%和text-align: center就是为了居中放置的，这种设置经常用在一个网站用于声明版权、网站地图这些，多看几个这样的网站源代码就会发现，它们都是这么做的。

此外，还有一个position: absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置还是通过 "left", "top", "right" 以及 "bottom" 属性进行规定。你可以拿它来做到让某个元素处于一个区域比如某个div背景的底部，这时外面套的那个元素不能用默认的positon设定，需改成position: relative。例如：

<!doctype html>

<html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #container{

            position: relative

            width: 400px

            height: 300px

            margin: 20px auto

            background-color: #de5

        }

        #innerFooter{

            position: absolute

            bottom: 0

            width: 100%

            text-align: center

        }

    </style>

    </head>

    <body>

        <div id="container">

            <div id="innerFooter">始终垂直居于块元素底部的文字</div>

        </div>

    </body>

</html>

div里面的文字底部对齐可以通过设置如下css样式实现

1

2

display:table-cell /*按照单元格的样式显示元素*/

vertical-align:bottom /*底对齐*/

举个例子：

创建HTML元素

1

<div>文字在div的底部对齐</div>

添加css样式

1

2

3

4

5

div{

width:200pxheight:50px /*设置div的大小*/

border:4px solid #beceeb/*为了便于观察，显示出边框*/

display:table-cell

vertical-align:bottom

显示效果

垂直对齐就是相对于外部容器垂直方向的对齐方式，如下三种方式：

1、垂直居中对齐：

css：vertical-align:middle

示例：

2、垂直底部对齐：

css：vertical-align:bottom

示例：

3、垂直顶部对齐：

css：vertical-align:top

示例：