html怎么设置文字向下

htML设置文字向下的方法：首先创建一个HTML示例文件；然后在body中定义一段文字内容；接着在父元素中设置css属性“posITion:relative”；最后在存放文字的子元素中设置css属性为“boottom:0”即可。

本文操作环境：Windows7系统、HTML5& & CSS3、Dell G3电脑

1、如果是文字或者其他块级元素。使用定位的思想。position：absolute，然后boottom：0。父元素要设置为position：relative。

因为绝对定位是相对于最近一个非static定位的元素的相对位置。 但是如果出现多个元素在同一父元素内 同时需要绝对定位移动位置，那么需要注意，如果直接这样做，会造成那些元素重叠，而不是与float一样的正常排布。

这是因为他们有相同的父元素，使用绝对定位之后就都会移动到父元素的左边，而不是还处在原来的位置。

为了解决这种情况，需要给那些需要移动位置的元素 嵌套一个父元素，让他们的父元素去定位，给他们的父元素设置relative，这样原先的父元素就变成了爷元素。

这样一来，再给他们设置完绝对定位加位置属性之后就不会出现重叠的效果，因为他们都是在父元素的限度内去移动，再跑也跑不出来。这样就又不重叠，又能贴近底部，但是需要注意。

新嵌套的父元素需要一个固定的高度，高度要高于内部元素。不然他的高度就是被内部元素撑开的。

【推荐：HTML视频教程】

示例：

!DOCTYPE HTML PubLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
    html>
    head>
    meta http-equiv="Content-type" content="text/html;
     charset=gb2312">
    title>
    无标题文档/title>
    style type="text/css">
#txt{
       height:300px;
     width:300px;
     border:1px solid #333333;
     text-align:center;
 position:relative  }
#txt p{
     position:absolute;
     bottom:0px;
     padding:0px;
 margin:0px}
    /style>
    /head>
      body>
    div id=txt>
    p>
    文字靠下/p>
    /div>
    /body>
    /html>
    

效果图：

2、如果是文字（块级元素没试过，到时候可以试一下）。那么需要给包着文字的那个div设置成 display：table-cell+ vertical：bottom。这样文字就贴着div底部了。

示例：

HTML：

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

css样式：

div{
        width:200px;
    height:50px;
      /*设置div的大小*/    border:4px solid #beceeb;
     /*为了便于观察，显示出边框*/    display:table-cell;
         vertical-align:bottom;
    }
    

效果图：

以上就是html怎么设置文字向下的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！