css中怎么让div里面的文字底部对齐

 我来答
菏侯腊r
高粉答主

推荐于2019-09-08 · 醉心答题,欢迎关注
知道小有建树答主
回答量:1039
采纳率:88%
帮助的人:29万
展开全部

两种办法,第一种可以作为默认选择。两种办法都可以让文字底部对齐。

1、如果是文字或者其他块级元素。使用定位的思想。position:absolute,然后boottom:0。父元素注意要设置一下position:relative。因为绝对定位是相对于最近一个非static定位的元素的相对位置。 但是如果出现多个元素在同一父元素内 同时需要绝对定位移动位置,那么需要注意,如果直接这样做,会造成那些元素重叠,而不是与float一样的正常排布,这是因为他们有相同的父元素,使用绝对定位之后就都会移动到父元素的左边,而不是还处在原来的位置。

为了解决这种情况,需要给那些需要移动位置的元素 嵌套一个父元素,让他们的父元素去定位,给他们的父元素设置relative,这样原先的父元素就变成了爷元素。这样一来,再给他们设置完绝对定位加位置属性之后就不会出现重叠的效果,因为他们都是在父元素的限度内去移动,再跑也跑不出来。这样就又不重叠,又能贴近底部,但是需要注意。新嵌套的父元素需要一个固定的高度,高度要高于内部元素。不然他的高度就是被内部元素撑开的。

2、如果是文字(块级元素没试过,到时候可以试一下)。那么需要给包着文字的那个div设置成 display:table-cell+ vertical:bottom。这样文字就贴着div底部了。

拓展资料:

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

参考资料:百度百科-CSS (层叠样式表)



learneroner
高粉答主

推荐于2017-10-10 · 关注我不会让你失望
知道大有可为答主
回答量:1.1万
采纳率:91%
帮助的人:6557万
展开全部

div里面的文字底部对齐可以通过设置如下css样式实现

display:table-cell;      /*按照单元格的样式显示元素*/
vertical-align:bottom;   /*底对齐*/

举个例子:

  1. 创建HTML元素

    <div>文字在div的底部对齐</div>
  2. 添加css样式

    div{
    width:200px;height:50px;  /*设置div的大小*/
    border:4px solid #beceeb; /*为了便于观察,显示出边框*/
    display:table-cell; 
    vertical-align:bottom;
  3. 显示效果

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友44f413af
推荐于2017-10-10 · 超过46用户采纳过TA的回答
知道小有建树答主
回答量:82
采纳率:0%
帮助的人:73.5万
展开全部
你应该设置li标签高度,然后设置line-hight这个属性,如果li标签是35px,你的line-hight也设置成35px的话就是垂直居中,设置大一点就底部对齐了。希望能帮到你
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
帐号已注销
2018-05-22 · TA获得超过82.9万个赞
知道大有可为答主
回答量:2602
采纳率:100%
帮助的人:174万
展开全部
div里面的文字底部对齐可以通过设置如下css样式实现

1
2

display:table-cell; /*按照单元格的样式显示元素*/
vertical-align:bottom; /*底对齐*/

举个例子:
创建HTML元素

1

<div>文字在div的底部对齐</div>

添加css样式

1
2
3
4
5

div{
width:200px;height:50px; /*设置div的大小*/
border:4px solid #beceeb; /*为了便于观察,显示出边框*/
display:table-cell;
vertical-align:bottom;

显示效果
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式