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

2019独角兽企业重金招聘Python工程师标准>>>

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让文字底部对齐的方法

转载于:https://my.oschina.net/u/1766067/blog/343986

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

css如何实现文字两端对齐,CSS实现文字两端对齐的方法是什么
CSS实现文字两端对齐的方法是什么发布时间:2020-08-31 14:13:18 来源:亿速云阅读:76 作者:小新小编给大家分享一下CSS实现文字两端对齐的方法是什么,希望大家阅读完这篇文章 ...
css文字在div中,[html][css]让文字在div中居中的方法[转]
转至:http://dreamweaver.abang.com/od/divcss/a/vertical-align.htm 一.行高(line-height)法如果要垂直居中的只有一行或几个文字, ...
div 中的控件底部对齐_css中怎么让div里面的文字底部对齐
展开全部两种办32313133353236313431303231363533e58685e5aeb931333365663562法,第一种可以作为默认选择.两种办法都可以让文字底部对齐. 1.如果 ...
[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
css如何实现让div中的多行文字居中显示
标题css如何实现让div中的多行文字居中显示最近在做项目的时候遇到一个div中有多行文字(可能一行也可能多行)需要实现居中显示,试了好多方法都不行,显然不能使用padding来居中,因为文字有多少 ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
css 控制文字左右对齐
css 控制文字左右对齐: <p class="center">我是两端对齐文字端对齐文字<span></span></p> .ce ...
让div中的p标签文字垂直居中的方法
设置父div标签的inline-height属性将inline-height属性的值设置成和div的高度一下就可以简单的实现div中p标签内的文字垂直居中示例如下: html代码 <foot ...

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

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

最新文章

热门文章