首页 > 其他分享 >aboslute(绝对定位的元素)居中方法

aboslute(绝对定位的元素)居中方法

时间:2023-08-16 10:00:14浏览次数:47  
标签:居中 定位 right 父级 元素 bottom aboslute left

1.使用绝对定位元素自身属性进行居中设置

position: absolute;
bottom: 16px;//放置在底部

//设置居中的关键属性
 right: 0;
 left: 0;
 margin: 0 auto;

该方法主要使用left:0和right:0对dom元素进行拉扯,因此会导致属性值为auto的边距被拉伸,使该元素的宽度撑满整个父级

该方法也适用于垂直居中

 

1.使用绝对定位元素 父级flex布局 进行设置

绝对定位的元素在设置right、left、top、bottom之前仍然受到父级的布局影响

如仅设置bottom、top则父级对于水平方向的布局仍然会影响该元素

.parent{
    display:flex;
    justify-content:center;
    .child{
        position:absolute;
        bottom:10px;
    }
}

如仅设置right、left则父级对于垂直方向的布局仍然会影响该元素

.parent{
    display:flex;
    align-items:center;
    .child{
        position:absolute;
        right:0;
    }
}

 

标签:居中,定位,right,父级,元素,bottom,aboslute,left
From: https://www.cnblogs.com/Simoon/p/17633153.html

相关文章

  • 代驾公司品牌营销的定位和目的
      随着汽车保有量的增加,代驾业务也越来越受欢迎,但是,代驾公司品牌需要进行大力推广,以提高品牌知名度和曝光量。今天就让指针跃动来跟大家聊聊这个问题吧。 对于品牌营销方案,每一项都有明确的核心价值和核心目的,旨在帮助代驾公司塑造品牌形象、吸引用户、提升用户体验和忠诚度......
  • Python PIL Image.crop()详解+裁剪四元组定位的小技巧
    0Image.crop详解image.crop是Python中用于裁剪图片的函数。在使用该函数前,我们需要先导入PIL库,即PythonImageLibrary。fromPILimportImage#打开图片img=Image.open('example.jpg')#图片的裁剪区域(区域左上角的坐标为(100,100),右下角的坐标为(300,300))crop_are......
  • 三次问鼎!天翼云稳居中国政务公有云基础设施市场第一!
    近日,IDC发布的《中国政务云市场份额,2022:公有云基础设施》报告显示,2022年政务公有云基础设施市场规模为92.5亿元人民币,同比增长38.7%。其中,中国电信天翼云保持中国政务公有云基础设施市场第一,稳居行业龙头地位。这是继IDC发布2022H1《中国智慧城市半年度数据跟踪报告:政务云部分》......
  • 学习了几种定位方式--记录
    fromseleniumimportwebdriverfromtimeimportsleepfromselenium.webdriver.common.byimportBy#通过ID来定位#driver=webdriver.Chrome()#driver.maximize_window()#driver.get('http://www.baidu.com')#sleep(3)#driver.find_element(By.ID,'kw�......
  • 当打开百度,定位输入报错怎么解决driver.find_element_by_id('kw').send_keys("seleniu
    报错如下: 解决方案,改变编写方式,引入fromselenium.webdriver.common.byimportBy  源码:例子说明: 打开百度,输入selenium进行搜索。fromseleniumimportwebdriverfromtimeimportsleepfromselenium.webdriver.common.byimportBydriver=webdriver.Chrome()d......
  • 如何通过dump文件定位崩溃,解决问题
    1、dump文件是附加堆栈信息的存储文件的简称,文件扩展名“.dmp”,通过dump文件我们可以得到程序运行某一时刻的堆栈数据。2、当程序意外崩溃后,通常程序会立即中断运行,拿到这一时刻的dump文件就可以通过此时的堆栈进行分析,找到崩溃的代码并分析原因。3、当程序遇到未处理异常(主要......
  • Xpath定位方式
    Xpath定位方法 **浏览器中如何找到元素**Chrome浏览器:按F12,将鼠标点击下图中的图标,再到浏览器页面上选择需要定位的元素,Elements页中就会自动定位高亮显示页面中的元素。1.1.绝对路径定位顾名思义,将Xpath表达式从html的最外层节点,逐层填写,最后定位到操作元素类似:/html/......
  • Wordpress:如何使用Elementor给页面Button做跳转页面锚点定位?
    网站页面有的关键部分不一定在页面首屏,但是如果其它页面有时候需要做跳转,比如联系框,需要直接跳转到联系框的实际位置,在使用Elementor插件的情况下,如何实现呢?前端技术告诉我们,要实现点击a标签或者按钮跳转到指定位置,可以使用id定位,并在跳转链接后加入#符号附带该ID即可如: ......
  • Oracle慢SQL定位
    统计慢查询耗时select*from(selectsa.SQL_TEXT"执行SQL",sa.EXECUTIONS"执行次数",round(sa.ELAPSED_TIME/1000000,2)"总执行时间",round(sa.ELAPSED_TIME/1000000/sa.EXECUTIONS,2)"平均执行时间",......
  • vue+el-tree 通过下拉框选中节点,定位到当前节点,并高亮
    此处为下拉选择器:<el-selectref="searchSelect"v-model="filter"filterableremotesize="mini"clearableplaceholder="请输入关键词":remo......