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

,

刚开始觉得使用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. Django 2.0 学习(19)：Django 分页器

    Django 分页器 要使用Django实现分页功能,必须从Django中导入Paginator模块(painator - 分页器) views.py from django.shortcuts im ...

  2. P4611 [COCI2011-2012#7] TRAMPOLIN

    题目背景 有很多超级英雄:蝙蝠侠,蜘蛛侠,超人等.其中,有一位叫牛.今天他想模仿蜘蛛侠,所以他选择了一排高大的摩天楼来跳. 题目描述 具体而言,他选择了一个由 N 个摩天大楼构成的序 列,从左到右编号 ...

  3. selenium基础-打开百度进行搜索

    1. 安装Python 2. 安装selenium 3. 下载谷歌驱动ChromeDriver,放到Python的Scripts目录下 4. 编写代码,如下 # coding: utf-8 from ...

  4. c++11 可变参数模板类

    c++11 可变参数模板类 #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #inc ...

  5. 51nod 1766 树上的最远点对 | LCA ST表 线段树 树的直径

    51nod 1766 树上的最远点对 | LCA ST表 线段树 树的直径 题面 n个点被n-1条边连接成了一颗树,给出a~b和c~d两个区间,表示点的标号请你求出两个区间内各选一点之间的最大距离,即 ...

  6. Maximum Subarray - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Maximum Subarray - LeetCode 注意点 最大值有可能是正负数交替着出现 解法 解法一:一次遍历即可.当sum小于0的时候就重新开始 ...

  7. 【ZJOI 2018】线图（树的枚举，hash，dp）

    线图 题目描述 九条可怜是一个热爱出题的女孩子. 今天可怜想要出一道和图论相关的题.在一张无向图 $G$ 上,我们可以对它进行一些非常有趣的变换,比如说对偶,又或者说取补.这样的操作往往可以赋予一些传 ...

  8. UVA10498 Happiness 【单纯形】

    题目链接 UVA10498 题解 模板题 #include<algorithm> #include<iostream> #include<cstdlib> #inc ...

  9. codeforces div1 & div2 参与人员分数统计

    Analysis helps to see the nature of things.

  10. where EXISTS （子查询）多对多中通过中间表查对方列表

    用户表A,小组表B,小组和用户是多对多关系,中间有个中间表M 已知 小组 id 即teamId ,想知道这个小组中的用户列表信息,可以如下写sql: select * from A a where E ...