html绝对定位到相邻元素中间,css – 在另一个元素的中心下方水平居中绝对定位元素...

有不同的方法可以做到这一点,但我发现最简单的方法是对abolute定位元素执行以下操作：

top: 0;

left: 50%;

transform: translateX(-50%);

使用此方法,您无需知道任何元素的大小.

它是如何工作的？

左边：50％将它放在祖先元素的中间(这里100％是祖先元素的大小).

变换：translateX(-50％)使绝对定位元素的中心到达左角的位置(此处100％是绝对定位元素的宽度).

为了使这项工作,父元素与按钮具有相同的宽度也很重要.我使用了一个父元素来包含按钮和aboslutely定位元素i,以便top：0直接位于按钮下方.

简化的html：

Click Me!

Absolute positioned

简化为less / scss

.container {

display: inline-block;

.button { ... }

.relative {

position: relative;

.absolute {

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

}

html绝对定位到相邻元素中间,css – 在另一个元素的中心下方水平居中绝对定位元素...相关推荐

求列表最大元素不用max_python3实现从一个无序列表中求取连续元素之和中最大的和...
介绍今天遇到一个需求,要求从一个无序列表中求取连续元素之和中最大的和.使用python做了实现,后来想着可以作为一个小知识点分享出来,或许能在某时某刻给某位同学一些帮助.下面就直接上代码(图片和文字 ...
python counter 出现次数最少的元素_[PY3]——找出一个序列中出现次数最多的元素/collections.Counter 类的用法...
问题怎样找出一个序列中出现次数最多的元素呢? 解决方案 collections.Counter 类就是专门为这类问题而设计的, 它甚至有一个有用的 most_common() 方法直接给了你答案 c ...
java中list删除元素_java中，删除一个List中的后n个元素
在java中,如果要删除List中的后n个元素,可以选择这个方法:循环n次,每次删除List的最后一个元素. 下面是一个例子(删除一个拥有6个元素的后三个元素): import java.util.L ...
求一个n*n矩阵对角线元素之和C语言,求一个n*n矩阵主对角线之和,次对角线元素之和.用指针完成...
#include using namespace std; void main() { /* 变量定义与初始化 */ int i,j; int nMainSum = 0; int nSubSum = ...
[css] 怎样把一个div居中？怎样把一个浮动元素居中？怎样把绝对定位的div居中？
[css] 怎样把一个div居中?怎样把一个浮动元素居中?怎样把绝对定位的div居中? 主要用到:text-alin: center;margin: 0 auto;position: relative ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
CSS：基本概念、选择器、伪类伪元素
基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护. 元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...
css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
css 两个元素重叠,css元素如何重叠？
css元素重叠的方法:1.给元素设置负margin,负margin可以让元素的占用空间变小,后面的元素可以覆盖当前的元素:2.使用position属性,利用相对定位和绝对定位来让多个元素进行重叠. 本 ...

html绝对定位到相邻元素中间,css – 在另一个元素的中心下方水平居中绝对定位元素...

html绝对定位到相邻元素中间,css – 在另一个元素的中心下方水平居中绝对定位元素...相关推荐

最新文章

热门文章