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

,

刚开始觉得使用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. 【移动端debug-5】可恶的1px万能实现方案

    最近和设计同学调ui,遇到的是一位对1px有极致追求的同学,像素眼一眼看出我写的是不是1px,所以让我好好地研究了一番1px到底怎么写最方便. 一.为什么出不来1px? 简而言之:css的1px只是一 ...

  2. Python中用dict统计列表中元素出现的次数

    01 Python增加元素,不像其他语言使用现实的操作接口,只需要dict[1]=3,如果字典中不存在1,则直接新增元素键值对(1,3),如果存在则替换键1为3. if key in dict:判断出 ...

  3. Python学习---基础篇

    ###打开文件并打印: #!/usr/bin/python3 f = open('F://myproject/test.txt', encoding='utf-8',mode='r') content ...

  4. Python之路3【第零篇】目录

    Web应用框架篇 1.Web应用框架前戏

  5. BZOJ5006 THUWC2017随机二分图（概率期望+状压dp）

    下称0类为单边,1类为互生边,2类为互斥边.对于一种匹配方案,考虑其出现的概率*2n后对答案的贡献,初始为1,如果有互斥边显然变为0,否则每有一对互生边其贡献*2.于是有一个显然的dp,即设f[S1] ...

  6. linux eclipse add desktop shortcut with root permission

    gedit ~/.local/share/applications/opt_eclipse.desktop sudo apt-get install gksu [Desktop Entry] Type ...

  7. Crowd Control(输出不在最大值最小化的最短路上的边)

    题意: 就是求完最大值最小化  然后输出在这条最大值最小化的最短路上的点的不在最短路上的边,emm.... 解析: 很明显,先套spfa最大值最小化模板,emm... 在更新d的时候 用一个pre去记 ...

  8. Gauss Prime UVA - 1415

    题意:给出a和b判定是否为高斯素数 解析: 普通的高斯整数i = sqrt(-1) 高斯整数是素数当且仅当: a.b中有一个是零,另一个是形为或其相反数的素数: 或a.b均不为零,而为素数. 这题 提 ...

  9. 使用jQuery在javascript中自定义事件

    js中的自定义事件有attachEvent,addEventListener等等好多种,往往受困于浏览器兼容,而且代码写起来也相当麻烦.jQuery为我们解决了这个问题,几行代码就可以很好的实现事件的 ...

  10. redis3.2装完后 其它机子访问爆protocol error, got 'n' as reply type byte

    服务器上装了reids3.2版本,配置文件中已将bind的选项注释掉, linux的iptables的redis端口也开放 其它机子的PHP访问redis爆“protocol error, got ' ...