用CSS让文字居于div的底部

css文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?

<!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>aadsad</p>
</div>
</body>
</html>

  

时间: 2024-10-30 04:09:55

用CSS让文字居于div的底部的相关文章

CSS设置文字在div的中央显示(转)

网址来源:http://keleyi.com/a/bjac/n1j9gb06.htm #divId_keleyi_com {width: 200px;height: 40px; /*div的高度*/line-height:40px; /*/这个数值要和height高度相等,才能控制文字上下居中*/text-align:center; /*/控制文字左右居中*/ color: #FB592B; /*/字体颜色*/font-size:25px;}<div id="divId_keleyi_co

在div中使用css让文字底部对齐的方法

css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐,并且靠近的距离可以调节,精确到像素,在网上搜集到三段代码如下.由www.169it.com 搜集整理 代码1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE HTML PUBLIC   "-//W3C//DTD HTML 4.01 Transit

CSS div水平垂直居中和div置于底部

一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_center { position: absolute; top: 50%; left: 50%; margin-left: -180px; /*要居中的div的宽度的一半*/ margin-top: -120px; /*要居中的div的高度的一半*/ } 三.div置于底部(footer) .bot

CSS实现文字半透明显示在图片上方法

CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在图片的底部,用来说明图片的内容,当作图片标题,标题文字和背景可以设置半透明,鼠标经过图片时边框换色. 代码预览 代码如下 复制代码 <head> <meta http-equiv="Content-Type" content="text/html; charse

CSS让footer保持在页面底部

序:当希望将footer保持在页面底部(即使页面内容高度低于窗口高度),可以尝试下面的方法.. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS让footer保持在页面底部</title> <style type="text/css"> * { margin:

CSS立体文字效果最佳实践

上一篇的<纯CSS3文字效果推荐>文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,今天来补充下,顺便领略sass的强大功能,请大家摩摩拳擦擦掌,开工咯! 案例效果还是在codepen,在线研究点这里,下载收藏点这里. 1.单单纯纯的效果一 为了简化操作,我们使用和上一篇文章<纯CSS3文字效果推荐>一样的文档结构,后面的效果大差小不差,也就不再列出. <div contenteditable

css中文字能够撑开高度吗

css中文字能够撑开高度吗:本章节介绍一个可能比较误导人的概念.那就是当一个div没有设置高度的时候,可能很多人认为它的高度是由内部的文字撑开的,真的是这样吗,下面就通过代码实例进行一下验证,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softw

css实现文字竖排效果

css实现文字竖排效果:在当前大家都习惯于横向排列的文本,但是绝大多数朋友也是知道的,在古代中国的文本是竖向排列的,本章节通过代码实例介绍一下如何实现文本的竖向排列效果,这样的需求在实际应用中也是有的.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.so

html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : clip | elli