HI,欢迎您光临Downzz,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!
当前位置:首页 > 站长教程 > 建站经验 > CSS教程 > 如何让文本位于div的底部_CSS实例

如何让文本位于div的底部_CSS实例

时间:2019-10-28人气:388来源:Downzz我要评论(0)

在默认状态下,文本是位于div的顶端的,在实际应用中,可能需要将文本底端对齐,下面就介绍一下如何实现此中效果,实现此种效果的方式有多种,就介绍两种比较常用的方法。

将文本放置于一个容器中,然后将此容器进行绝对定位,使之位于div的地步。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<style type="text/css">
.parent{
  height:200px;
  width:200px;
  border:1px solid green;
  position:relative
}
.parent p{
  position:absolute;
  bottom:0px;
  padding:0px;
  margin:0px
}
</style>
</head>
<body>
<div class="parent">
  <p>Downzz.com欢迎您</p>
</div>
</body>
</html>

利用line-height属性,将文本固定于div的底部。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<style type="text/css">
.parent{
  height:200px;
  width:200px;
  border:1px solid green;
  font-size:16px;
  line-height:384px;
}
</style>
</head>
<body>
<div class="parent"> Downzz.com欢迎您 </div>
</body>
</html>

以上代码同样实现了我们想要的效果,行高大小设置的计算公式:200px-(16px/2))x2=384px。

温馨提示:以上内容和图片整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!如有侵权行为请联系删除!

相关文章

  • 正则提取车牌最后一位数字_正则实例

    车牌的最后一位之所以特殊,是因为经常利用它制定一些规则。比如北京这种车辆保有量大的城市,会使用最后一位数字指定规则限行。下面分享一段正则代码,实现了匹配车牌最后一位数字的功能。代码如下:/\d(?!.*\d)/代码简单分析如下:(1).\d
  • 匹配商品条形码正则表达式代码_正则实例

    商品条形码具体是什么东西没有研究过。通过谷歌或者百度能够找到关于它的详细介绍。但是国内的条形码基本规则如下:(1).总共13位数字。(2).前两位数字规定是69。正则表达式代码如下:/^69\d{11}$/比较简单不多介绍,更多内容参阅如下

网友评论

请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!

最新评论

还没有收到评论,赶紧来抢沙发吧~

关于站长下载 | 联系方式 | 发展历程 | 版权声明 | 下载帮助(?) | 广告联系 | 网站地图 | 友情链接

Copyright 2005-2019 Downzz.Com 【站长下载】 版权所有 浙ICP备17005543号-4 | 浙公网安备 42011102000245号工信部

声明: 本站部分内容属于原创转载请注明出处 如有侵权行为请严格参照本站【版权声明】与我们联系,我们将在48小时内容进行处理!