本文翻译自：How to center a “position: absolute” element

I'm having a problem centering an element that has the attribute position set to absolute . 我在将属性position设置为absolute的元素居中时遇到问题。 Does anyone know why the images are not centered? 有谁知道为什么图像没有居中？

 body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 450px; }

 <body> <div id="slideshowWrapper"> <ul id="slideshow"> <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li> <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li> </ul> </div> </body>

#1楼

参考：https://stackoom.com/question/ZhOF/如何居中-位置-绝对-元素

#2楼

A simple CSS trick, just add: 一个简单的CSS技巧，只需添加：

width: 100%;
text-align: center;

This works on both images and text. 这适用于图像和文本。

#3楼

Use margin-left: x%; 使用margin-left: x%; where x is the half of the width of the element. 其中x是元素宽度的一半。

#4楼

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

#5楼

Your images are not centered because your list items are not centered; 您的图像未居中，因为列表项未居中； only their text is centered. 只有他们的文字居中。 You can achieve the positioning you want by either centering the entire list or centering the images within the list. 您可以通过将整个列表居中或将列表中的图像居中来实现所需的定位。

A revised version of your code can be found at the bottom. 您的代码的修订版可以在底部找到。 In my revision I center both the list and the images within it. 在我的修订中，我同时将列表和其中的图像居中。

The truth is you cannot center an element that has a position set to absolute. 事实是，您不能将位置设置为绝对的元素居中。

But this behavior can be imitated! 但是这种行为可以被模仿！

Note: These instructions will work with any DOM block element, not just img. 注意：这些说明适用于任何DOM块元素，而不仅仅是img。

Surround your image with a div or other tag (in your case a li). 用div或其他标签（在您的情况下为li）包围图像。
```
 <div class="absolute-div"> <img alt="my-image" src="#"> </div> 
```
Note: The names given to these elements are not special. 注意：这些元素的名称并不特殊。

Alter your css or scss to give the div absolute positioning and your image centered. 更改css或scss以使div绝对定位并使图像居中。

 .absolute-div { position: absolute; width: 100%; // Range to be centered over. // If this element's parent is the body then 100% = the window's width // Note: You can apply additional top/bottom and left/right attributes // ie - top: 200px; left: 200px; // Test for desired positioning. } .absolute-div img { width: 500px; // Note: Setting a width is crucial for margin: auto to work. margin: 0 auto; }

And there you have it! 在那里，您拥有了！ Your img should be centered! 您的img应该居中！

Your code: 您的代码：

Try this out: 试试看：

 body { text-align : center; } #slideshow { list-style : none; width : 800px; // alter to taste margin : 50px auto 0; } #slideshow li { position : absolute; } #slideshow img { border : 1px solid #CCC; padding : 4px; height : 500px; width : auto; // This sets the width relative to your set height. // Setting a width is required for the margin auto attribute below. margin : 0 auto; }

 <ul id="slideshow"> <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li> <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li> </ul>

I hope this was helpful. 我希望这可以帮到你。 Good luck! 祝好运！

#6楼

Div vertically and horizontally aligned center Div垂直和水平对齐中心

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Note : Elements should have width and height to be set 注意：元素应设置宽度和高度

如何居中“位置：绝对”元素相关推荐

css图片居中_网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析一个元素,它有可能有背景,那我要它的背景居中对齐 ...
LeetCode19. Remove Nth Node From End of List 删除链表中的倒数第n个位置的元素
前言本文是LeetCode19. Remove Nth Node From End of List解法,这个题目需要删除链表中的倒数第n个位置的元素代码 # -*- coding: utf-8 - ...
Java List 更换指定位置的元素
Java List 更换指定位置的元素使用的方法是list.set() 方法下面写一个list 说下具体的使用 List<String> list = new ArrayList< ...
Redis中列表list数据类型（增加（在左侧、右侧或指定元素前后插入数据）、获取（获取表内指定范围的元素）、更新（获取指定索引位置的元素值）、删除（删除指定元素、count））
列表的元素类型为string 按照插⼊顺序排序 1. 增加 1.1 在左侧插⼊数据 lpush key value1 value2 ... 例1:从键为a1的列表左侧加⼊数据a . b .c lpus ...
相对定位android,appium相对位置定位元素----父节点/兄弟节点定位
appium相对位置定位元素----父节点/兄弟节点定位发布时间:2020-06-30 05:51:41 来源:51CTO 阅读:5620 作者:niedongri 讲一下定位手机app上元素时定位 ...
python--通过xpath相对节点位置查找元素（续）
之前写过相对父元素及下一个兄弟元素的方法. 这次补充一下xpath相对节点位置查找元素的所有方法.例子就不举了,自己可以去练练. xpath相对节点查找方法: 1.xpath('./ancestor: ...
java数组怎样插入元素,Java如何在给定位置将元素插入数组？
众所周知,Java中的数组是固定大小的对象,一旦创建,数组的大小就无法更改.因此,如果您希望有一个可调整大小的类似数组的对象,可以在给定位置插入元素,则可以使用java.util.List对象类型. ...
php 元素插入数组指定位置,数组任意位置插入元素,删除特定元素的实例
如下所示: $ary = array( array('t'=>1,'y'=>2), array('t'=>2,'y'=>9) ); $t = array_splice( $ar ...
数组指定位置添加元素_数据结构--顺序表的9种基本运算，初始化，销毁，判断是否为空表，长度，求指定位置的元素值......
成功实现后的示意图为: 代码为: // 线性表-顺序表.cpp : 此文件包含 "main" 函数.程序执行将在此处开始并结束. //顺序表的9种基本运算 #include &qu ...

如何居中“位置：绝对”元素

#1楼

#2楼

#3楼

#4楼

#5楼

But this behavior can be imitated! 但是这种行为可以被模仿！

And there you have it! 在那里，您拥有了！ Your img should be centered! 您的img应该居中！

Your code: 您的代码：

#6楼

如何居中“位置：绝对”元素相关推荐

最新文章

热门文章