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

,

刚开始觉得使用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. 计算机网络【3】—— IP地址分类与子网划分

    一.IP地址分类

  2. js判断浏览器语言实现网站国际化

    一般国际化的网站至少是有中.英文两种语言的,然后就是在不同的语言环境下使用不同的语言页面. 1.实现原理 一般实现这种功能的方法,无非就是两种, 第一种,判断浏览器语言类型: 第二种,判断ip所属国家 ...

  3. KMP之Z-function (扩展kmp)

    http://codeforces.com/blog/entry/3107 // s[0, ..., n-1], z[0] = 0// z[i] is the length of the longes ...

  4. uoj35 后缀排序

    题目链接:http://uoj.ac/problem/35 这是一道模板题. 读入一个长度为 n 的由小写英文字母组成的字符串,请把这个字符串的所有非空后缀按字典序从小到大排序,然后按顺序输出后缀的第 ...

  5. Mininet 系列实验（五）

    实验内容 实现一个单个交换机的拓扑,添加一个交换机,和N个主机到网络中.交换机和主机之间的每个链路能够设置带宽.延迟时间.以及丢包率.创建一个包含一个交换机和四个主机的网络,使用iperf测试主机之间 ...

  6. BAT脚本如何自动执行 adb shell 以后的命令

    @echo off echo su > temp.txt echo 其它命令 >> temp.txt adb shell < temp.txt del temp.txt 求问 ...

  7. vmware中centos7设置静态IP

    1.vmware—>Edit—>Virtual Network Editor,选中vmnet8-Nat设置,查看网关IP 2.在centos中设置: vi /etc/sysconfig/n ...

  8. Qt ------ QWidget 自定义子类使用信号与槽（Q_OBJECT）后 stylesheet 失效

    这个应该属于 Qt 的一个bug,Qt assistant 给出相应的解决办法:重写函数“void paintEvent(QPaintEvent *event);”,添加下面截图中的一段代码

  9. Python高手之路【十一】python基础之面向对象

    创建类和对象 面向对象编程是一种编程方式,此编程方式的落地需要使用 “类” 和 “对象” 来实现,所以,面向对象编程其实就是对 “类” 和 “对象” 的使用. 类就是一个模板,模板里可以包含多个函数, ...

  10. Linux基础命令之grep

    grep : 根据pattern(模式)搜索文本,并将符合模式的文本行显示出来,并不会修改原文件. 用法: grep  [options]   ‘ pattern ‘  /file       #也可 ...