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

css对文字的布局上没有靠容器底部对齐的参数，不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐，并且靠近的距离可以调节，精确到像素，在网上搜集到三段代码如下。由www.169it.com 搜集整理

代码1:

<!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>CSS实现文字底部对齐</title>

<style type="text/css">

#txt{

height:300px;

width:300px;

border:1px solid #333333;

position:relative

}

#txt p{

position:absolute;

bottom:0px;

padding:0px;

margin:0px

}

</style>

</head>

<body>

<div id="txt">

<p><a href="http://www.169it.com" target="_blank">最新IT科技资讯</a></p>

</div>

</body>

</html>

代码2:

<!DOCTYPE html PUBLIC   "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

body{font-size:12px;}

.div{width:500px;height:200px;border:1px solid #333;background:#ccc;}

.div2{

height:20%;

width:300px;

margin:0 auto;

background:#eee;

bottom: 0px;

position: relative;

text-align: center;

}

.div3{height:80%;}

</style>

</head>

<body>

<div class="div">

<div class="div3"></div>

<div class="div2">

看看是不是你想要得效果<br/>

不這樣的話用table是比較方便達到你要求的效果

</div>

</body>

</html>

代码3:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>CSS实现文字底部对齐</title>

<style type="text/css">

#txt{

height:246px;

width:512px;

border:1px solid #000000;

position:relative

}

#txt span{

position:absolute;

bottom:10px;

padding:0px;

margin:0px

}

</style>

</head>

<body>

<div id="txt">

<span><a href="#" target="_blank">169IT科技资讯</a></span>

</div>

</body>

</html>

以上代码仅供参考。

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

时间： 2024-10-25 18:51:11

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

【IOS】将字体大小不同的文字底部对齐

从WP转IOS了,还是放不下...... 在项目中,要实现如图多个不同大小的文字底部对齐的效果像下面这样: (想要的效果) 以为用三个UIFont不同的UILabel 之后让他们底部对齐就可以了,但是效果是下面这样的: (不想要的效果) 底部完全不对齐呀,为什么"1314"比两边高出了那么多呀!!!!强迫症不能忍呀!!! ---------------------------------------------------------------------------

web中的CSS、Xpath等路径定位方法学习

今天不到八点就到公司了,来的比较早,趁着有点时间,总结下web中的CSS.Xpath等路径定位定位的方式吧! 简单的介绍下xpath和css的定位理论知识就不罗列了还是利用博客园的首页.直接附上代码: 这个是xpath 1 #!/usr/bin/env python 2 # -*- coding: utf_8 -*- 3 4 from learn_webdriver import Webdriver 5 from selenium import webdriver 6 from seleni

CSS 左右两边底部对齐

https://demo.cssworld.cn/4/3-2.php <style type="text/css"> .parent{ width:500px; text-align: center; overflow: hidden; } .son{ float: left; width: 250px; margin-bottom:-99999px; padding-bottom: 99999px; } .son:nth-child(1){ background: #7F

CSS笔记---文字两边对齐

关于jsp中引用css外部样式无效时的处理方法

今天做项目遇到的一个小问题,如下所示: <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"> 引用外部css样式时,无效.然而在相同目录下的其他jsp文件也用了相同的路径引入该css样式,发现没有啥问题.这就很奇怪了,检查代码后发现没有问题.那问题只可能出在路径上. 将相对路径改为绝对路径后,发现就没问题了. <link href="${pageContext.r

p标签中的span标签文字垂直居中对齐

<p>轻舞飞扬<span>第一次亲密接触</span></p> p标签的font-size:30px; span标签的font-size:24px; 让span标签垂直居中的方法: p>span{ display:inline-block; vertical-align:middle; } 基础知识需要牢记

转 CSS制作水平垂直居中对齐各种方法总结

作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对于我这样的初学者有一定的帮助. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处

Web前端学习第九天·fighting_使用CSS美化文字（二）

line-height的继承性子标签可以继承父标签中的line-height属性,不管他是行级标签还是块级标签. 块级标签可以覆盖父标签的line-height属性.(块级元素的继承性,当子元素是块级元素并且设定了自己的line-height属性时,它的line-height由自己决定.) 行级标签的继承性分为以下两种情况:(取二者中偏大的那个) line-height(子) > line-height(父)时,行高=line-height(子) line-height(子) < line-

CSS 给文字加阴影

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>阴影文字</title> </head> <body> <div style="font-size:36pt; font-family: Arial ; color: red; positi