html 让文本 靠底部

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 让文本 靠底部相关的知识，希望对你有一定的参考价值。

html让文本靠底部的办法。如下参考：

1、超文本标记语言是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。

2、想要让文字在底部，需要用到 position:fixed; bottom:0px; left:0px;，想要让文字居中，需要用到 text-align:center。

3、代码

<div class="div_foot">       

&copy;2017-2018 

</div>

.div_foot

position: absolute;

height: 50px;

text-align: center;

line-height: 50px;

width: 100%;

扩展资料

HTML的编辑器

1、基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。

2、半所见即所得软件，

如：FCK-Editer、E-webediter等在线网页编辑器；

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：

AMAYA（出品单位：万维网联盟）；

FRONTPAGE（出品单位：微软）；

Dreamweaver（出品单位：Adobe）。

参考资料：

百度百科-HTML

 参考技术A

1、利用网页设计工具例如dreamwaver可以像word那样编辑，你可以实现你想要的结果，不需要懂技术；如果熟悉点html，通过设置表格的单元格对齐也可以实现；

2、具体的代码如下：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"">
<html xmlns="">
<style type="text/css">
#a
#a #y
/*padding:10px 10px 10px 10px;*/
width:480px;
float:left;
clear:left;
border:1px #999999 solid;

#a #x
width:480px;
/*margin-left:550px;*/
float:right;
clear:right;
border:1px #999999 solid;

</style>
<head>
<meta http-equive="content-type" content="text/html;charset=gb2312">
<title></title>
<link href="3.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="a">
  <div id="y"> 文本2 </div>
  <div id="x">    
      <marquee behavior=scroll direction=up align=bottom height="80px" />      
      文本1
      </marquee>    
  </div>
  
</div>
</body>
</html>

2、直接将代码复制出来，建立txt文档；然后保存格式为.html就可以应用了。（如下图）

 参考技术B 用css+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>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="#" target="_blank">百度知道</a></p>
</div>
</body>
</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>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="#" target="_blank">百度知道</a></p>
</div>
</body>
</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>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="#" target="_blank">百度知道</a></p>
</div>
</body>
</html> 参考技术C 下面这个代码就可以：
<div style='position:absolute;top:expression(this.offsetParent.scrollTop+this.offsetParent.clientHeight-20);'>
一二三四
</div>

如果你的DIV不是在BODY里面，有需要调整。 参考技术D <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"">
<html xmlns="">
<style type="text/css">
#a
#a #y
/*padding:10px 10px 10px 10px;*/
width:480px;
float:left;
clear:left;
border:1px #999999 solid;

#a #x
width:480px;
/*margin-left:550px;*/
float:right;
clear:right;
border:1px #999999 solid;

</style>
<head>
<meta http-equive="content-type" content="text/html;charset=gb2312">
<title></title>
<link href="3.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="a">
  <div id="y"> 文本2 </div>
  <div id="x">    
      <marquee behavior=scroll direction=up align=bottom height="80px" />      
      文本1
      </marquee>    
  </div>
  
</div>
</body>
</html>

代码如上。

带有图像和文本的 HTML 标头 - 将文本与底部对齐？

【中文标题】带有图像和文本的 HTML 标头 - 将文本与底部对齐？【英文标题】：HTML Header With Image And Text - Align Text To Bottom? 【发布时间】：2014-09-11 12:13:52 【问题描述】：

我正在用 CSS 编写一个 HTML 页面。在我的页面顶部，我想显示带有图像和文本的标题（文本左侧的图像）。图像大小为 64 x 64 像素，我希望文本较大。

我几乎可以做所有事情，除了我想在底部对齐文本，但无论我做什么，我似乎都无法让文本停止将自己置于顶部。

这是我的标题的 HTML：

<div id="container" class="container">
    <div class="header">
        <div class="header image"></div>
        <div class="header text">Header Text</div>
    </div>
</div>

这是CSS；

.container .header 
    height: 65px;
    border:2px solid red;


.container .header .image 
    background: url("../images/icon64.png") no-repeat;
    float: left;
    display: inline-block;
    width: 65px;
    border:2px solid green;


.container .header .text 
    float: left;
    display: inline-block;
    vertical-align: bottom;
    font-family: sans-serif;
    font-size: x-large;
    border:2px solid blue;

在搜索如何执行此操作后，我一直在阅读几个网页。我发现一页看起来很简单。他们说你必须为 display 属性使用 inline-block 才能使 vertical-align 得到尊重。

我将 CSS 更改为您在上面看到的内容，但仍然无法正常工作。这是我的标题的样子：

（请注意，边框颜色仅用于可视化正在发生的事情。）

谁能告诉我我做错了什么以及如何解决它以使我的文本在底部垂直对齐？

谢谢。

【问题讨论】：

【参考方案1】：

你也可以尝试给#header一个位置：相对 然后给 .text 绝对位置，所以如果你给 bottom:0;它将被堆栈到#header div的底部

【讨论】：

【参考方案2】：

没错，将元素设置为内联块并使用垂直对齐。但是，这意味着不要浮动元素！浮动元素是浮动元素，你否定 display: inline-block 声明：http://jsfiddle.net/qQtG9/2/（我已经清理了你的代码）。

HTML：

<div class="header">
    <div class="image"></div><div class="text">Header Text</div>
</div>

CSS：

.header 
    border:2px solid red;


.header .image 
    background: url("http://placehold.it/64x64") 
                no-repeat;
    width: 65px;
    height: 65px;
    border:2px solid green;


.header .text 
    font: x-large sans-serif;
    border:2px solid blue;


.header .image, 
.header .text 
    display: inline-block;
    vertical-align: bottom;

【讨论】：

我浮动元素的原因是因为我希望它们并排，我认为这是唯一的方法。 :O 只需将它们并排放在标记中：jsfiddle.net/qQtG9/2。当您在换行符上显示它们时，您使用回车符，浏览器将其视为空格。 什么意思？在 html 中，将它们并排放置意味着不要嵌套它们？ 好的，谢谢！ :) 我以前从未使用过小提琴，这很酷！ 更好的是，请查看更新后的代码以获得我的答案。标题中的 div 在 HTML 中彼此相邻堆叠。

以上是关于html 让文本 靠底部的主要内容，如果未能解决你的问题，请参考以下文章

css如何实现让文字沉到元素的底部

使底部边框更接近文本

android 如何让UI顶部和底部固定

对齐 div 文本底部

如何让 VSCode 编辑器停止滚动到文件底部？

始终在底部滚动文本框[重复]