最近调前端样式时候,遇到一个需求,在中间文字不对等的情况下想让下面的操作文字距离底部对齐,如图:

,

刚开始觉得使用margin-bottom就可以,后来发现只有margin-top是管用的,查了资料发现:

margin-bottom是下方的外边距，并不能让元素向下方移动，margin-top作为上边距，把元素“推”了下去。

如果希望图标距离下方30px，那么可以试试在ul上设置position: absolute，bottom: 30px，另外父元素也必须设置成position:relative,

于是试了一下,的确可以,但是水平居中又出了问题,由于是绝对定位,那么编辑和删除两个操作肯定是一样的,所以如果继续用left:50%这样居中的话,就会有个问题,那就是如果不会动态居中,删除按钮会往后推,最后查了资料

总算找到了这种情况下动态水平居中的方法:

margin-left: auto;

margin-right: auto;

width: 980px;

前面两个设为auto,自动,而且宽度必须设置,才会动态居中,效果如下:

达到了绝对定位距离底部一样,且根据内容动态水平居中的效果!记录一下,毕竟前端菜鸟,哈哈哈

margin-bottom无效问题以及div里内容动态居中样式!的更多相关文章

  1. css div中内容绝对居中（多行内容）

    div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title> ...

  2. 实现图标Icon+文字在div里自动中心居中（水平垂直居中）

    已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...

  3. div内容上下居中

    今天无聊闲逛技术群,听一哥们说要在div里面居中span内容. 第一印象:vertical-align: middle; 结果失效.因为他只对属于inline的元素或是inline-block.tab ...

  4. css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

    css参考文档        http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...

  5. div、ul、li等无法居中问题，text-align无效 margin auto无效

    很简单.如果是div,直接把div换成: <table align="center">        <tr>            <td> ...

  6. 实现div里的内容垂直居中

    ---恢复内容开始--- 在项目中我们会遇到这种情况,一个div的宽固定,里面的内容长度不定,不管是一行还是多行,都要垂直居中,有俩个实现方法: 1.使用absolute,top:50%,transf ...

  7. 为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？

    为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...

  8. 怎么解决div覆盖内容却没覆盖的问题?

    一.在上下结构的div布局中,可能出现div覆盖div,但是内容却没有出现覆盖的现象.看看一个示例 1: <!DOCTYPE html> 2: <html> 3: <he ...

  9. jQuery加载一个html页面到指定的div里

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

随机推荐

  1. jenkins 通过maven部署Tomcat8报错

    问题过程 jenkins执行构建过程中,可以在workspace/项目名/target/目录下产生xxx.jar文件 但是在执行构建后操作时报出如下错误 [INFO] ---------------- ...

  2. BZOJ5308 ZJOI2018胖

    贝尔福特曼(?)的方式相当于每次将所有与源点直接相连的点的影响区域向两边各扩展一格.显然每个点在过程中最多更新其他点一次且这些点构成一段连续区间.这个东西二分st表查一下就可以了.注意某一轮中两点都更 ...

  3. BZOJ3504 CQOI2014危桥（最大流）

    如果只有一个人的话很容易想到最大流,正常桥连限流inf双向边,危桥连限流2双向边即可.现在有两个人,容易想到给两起点建超源两汇点建超汇,但这样没法保证两个人各自到达自己要去的目的地.于是再超源连一个人 ...

  4. poj 2185

    http://poj.org/problem?id=2185 题意:求最小的模式块,使其无限扩展后包含给你的矩阵块(看别人题解才懂的题意): 分析:假设存在一个模式块可以满足上述条件,那么必然存在一个 ...

  5. Golang基础（二）

    1. 条件语句 if ... else if ... else... package main import "fmt" func main() { { fmt.Printf(&q ...

  6. 使用SUID二进制文件进行Linux权限升级技巧

      0x00 基础知识 众所周知,在Linux中一切都以文件存在,包括具有允许或限制三个执行操作(即读/写/执行)权限的目录和设备.因此,当给任何文件设置权限时,应该需要了解允许的Linux用户或限制 ...

  7. Java ConcurrentModificationException 异常分析与解决方案

    Java ConcurrentModificationException 异常分析与解决方案http://www.2cto.com/kf/201403/286536.html java.util.Co ...

  8. hdu 5852 ：Intersection is not allowed! 行列式

    有K个棋子在一个大小为N×N的棋盘.一开始,它们都在棋盘的顶端,它们起始的位置是 (1,a1),(1,a2),...,(1,ak) ,它们的目的地是 (n,b1),(n,b2),...,(n,bk). ...

  9. bzoj 3928: [Cerc2014] Outer space invaders

    $f[i][j]$表示消灭起始时间在$(i,j)$内的外星人所花费的最小代价. 考虑在这个区间内距离最远的外星人h,在他的区间中一定要选一个点要开一炮,而且这一炮可以顺便把其他跨过这个点的敌人消灭,剩 ...

  10. shell参数代表什么,如何调试shell？

    $0就是该bash文件名$?是上一指令的返回值$*所有位置参数的内容:就是调用调用本bash shell的参数.$@基本上与上面相同.只不过是“$*”返回的是一个字符串,字符串中存在多外空格.“$@” ...