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>

html代码

<body>

<DIV id="container">

<DI id="content">

<h1>Content</h1>

<p>请改变浏览器窗口的高度,以观察footer效果。</p>

<p>这里是示例文字,DIV固定………,这里是示例文字。</p>

</DIV>

<DIV Vid="footer">

<h1>Footer</h1>

</DIV>

</DIV>

</body>

CSS代码:

程序代码

body,html{

margin:0

padding:0

font:12px/1.5arial

height:100%

}

#container{

min-height:100%

position:relative

}

#content{

padding:10px

padding-bottom:60px

/*20px(font-size)

x2(line-height)+10px(padding)x2=60px*/

}

#footer{

position:absolute

bottom:0

padding:10px0

background-color:#AAA

width:100%

}

#footerh1{

font:20px/2Arial

margin:0

padding:010px

}

1、首先我们新建一个html页面,在这个html代码页面创建一个<div>标签,同时给这个<div>添加一个class类为footer。

2、然后我们设置footer类,把div固定在底部。创建<style>标签,在该标签内设置通过position: fixedbottom:0设置footer类样式,把div固定在底部。

3、然后我们保存html代码,使用浏览器打开即可看到不管如何放大缩小浏览器div都是固定在底部的。