网页设计怎么使文字向下对齐?

html-css039

网页设计怎么使文字向下对齐?,第1张

最简单的方法是给文字所在的那个标签加一个padding-top,用上填充的方法模拟出文字向下对齐的效果来。

如果不想用这种方法,也有比较复杂的实现手段。假设上面html的代码是是这样的:

广东科技学院??

那么可以这样来定义它的css

.footer{height:100pxposition:relative}

.center{position:absolutebottom:0text-align:center}

给文字做一下绝对定位,这样它的父元素无论高度是怎样,都可以向下对齐了。

改一下网站编码为:<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

即将utf-8改为bg2312即可

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Document</title>

        <style>

            body {

            font-size: 12px

            }

            

            #div1 {

            width: 400px

            margin: 20px auto

            /*border:1px solid red*/

            border-top: 1px solid blue

            border-right: 1px solid blue

            border-left: 1px solid blue

            border-bottom: 1px solid red

            height: 40px

            position: relative

            }

            

            #div1 div{

            width: 80px

            height: 30px

            font-size: 14px

            line-height: 30px

            text-align: center

            float: left

            background: #00FF00

            color: #FFFFFF

            border-left: 1px solid #eee

            margin-left: 10px

            position: absolute

            bottom: 0

            }

            #div1 .mydiv2 {

            left: 90px

            }

            #div1 .mydiv3 {

            left: 180px

            }

        </style>

    </head>

    

    <body>

        <div id="div1">

            <div>建设文明</div>

            <div>新浪微博</div>

            <div>意见征求</div>

        </div>

    </body>

</html>