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

,

刚开始觉得使用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. CF992C Nastya and a Wardrobe

    我是题面 题意很清晰,这种题,我们当然还是有两种方法来做啦 方法一:找规律 读完题我们来看样例,通过样例一已我们大概可以看出,答案或许是\(n*2^{k+1}\) 肯定不能这么简单对吧,那就来看样例二 ...

  2. A Shade of Moonlight CodeForces - 989D

    看这位博主的吧:https://blog.csdn.net/Steaunk/article/details/80660954

  3. Life Forms POJ - 3294（不小于k个字符串中的最长子串）

    题意: 求不小于字符串一半长度个字符串中的最长字串 解析: 论文题例11 将n个字符串连起来,中间用不相同的且没有出现在字符串中的字符隔开, 求后缀数组, 然后二分答案变为判定性问题, 然后判断每组的 ...

  4. thread 学习

    #include <thread> #include <cstdio> #include <utility> #include <iostream> v ...

  5. What?

    What? 本文主要讲解一下kubernetes周边的概念,可以说是一小部分的生态圈,逐渐了解一下,走进kubernetes的世界.请读者在读的时候,带着批判的态度去读. 一张概览图: 云计算: 原文 ...

  6. 《Linux内核设计与实现》学习总结 Chap5

    一.与内核通信 1.系统调用在用户空间进程和硬件设备之间添加了一个中间层. 作用: 1)为用户空间提供了一种硬件的抽象接口. 2)系统调用保证了系统的稳定和安全. 3)每个进程都运行在虚拟系统中,而在 ...

  7. unity生成Android apk

    前提:本文默认你安装了unity5.6版本,不是这个版本的没有Gradle(new)选项,也默认你安装了Android Studio并配置好了环境变量. Gradle(new):打包Android S ...

  8. R语言 线性回归

    0 引言 初学者,对于一些运行结果不是很清楚,所以看了一些课本和资料,这里做一个记录而已. 1 线性回归模型的结果分析 结果的解释: “call”:指出线性回归的公式 “Residuals”:之处从实 ...

  9. P2054 [AHOI2005]洗牌

    P2054 [AHOI2005]洗牌 题目描述 为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度 ...

  10. ubuntu16.04下caffe以cpu运行faster rcnn demo

    参考https://haoyu.love/blog404.html 获取并修改代码 首先,我们需要获取源代码: git clone --recursive https://github.com/rbg ...