I'm having a problem centering an element that has the attribute position set to 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>23 个解决方案
#1
894
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
#2
392
Without knowing the width/height of the positioned1 element, it is still possible to align it as follows:
在不知道positioned1元素的宽度/高度的情况下，仍然可以将其对齐如下:
例子
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
It's worth noting that CSS Transform is supported in IE9 and above. (Vendor prefixes omitted for brevity)
值得注意的是，IE9和以上版本支持CSS转换。(为了简洁，省略了供应商前缀)
Explanation
Adding top/left of 50% moves the top/left margin edge of the element to the middle of the parent, and translate() function with the (negative) value of -50% moves the element by the half of its size. Hence the element will be positioned at the middle.
添加50%的top/left将元素的top/left margin edge移动到父元素的中间，并使用(负)值-50%的translate()函数将元素的大小移动一半。因此元素将被放置在中间。
This is because a percentage value on top/left properties is relative to the height/width of the parent element (which is creating a containing block).
这是因为顶部/左侧属性上的百分比值相对于父元素的高度/宽度(它正在创建一个包含块)。
While a percentage value on translate() transform function is relative to width/height of the element itself (Actually it refers to the size of bounding box).
而translate()转换函数的百分比值相对于元素本身的宽度/高度(实际上是指边框的大小)。
For unidirectional alignment, go with translateX(-50%) or translateY(-50%) instead.
对于单向对齐，使用translateX(-50%)或translateY(-50%)。
1. An element with a position other than static. I.e. relative, absolute, fixed values.
1。具有非静态位置的元素。即相对、绝对、固定值。
#3
160
Centering something absolutely positioned is rather convoluted in CSS.
在CSS中，以绝对定位为中心是相当复杂的。
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
Change margin-left to (negative) half the width of the element you are trying to center.
将边缘向左更改为(负)要居中的元素宽度的一半。
#4
71
Div vertically and horizontally aligned center
垂直和水平对齐的中心。
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
Note : Elements should have width and height to be set
注意:元素应该设置宽度和高度
#5
42
A simple CSS trick, just add:
一个简单的CSS技巧，只需添加:
width: 100%;
text-align: center;
This works on both images and text.
这对图像和文本都有效。
#6
39
If you want to center an absolute element
如果你想把一个绝对元素居中
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered left to right, but not with top to bottom
如果你想要一个容器以左为中心，而不是从上到下。
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered top to bottom, regardless of being left to right
如果你想要一个容器从上到下居中，不管它是从左到右
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Update as of December 15, 2015
更新截至2015年12月15日
Well I learnt this another new trick few months ago. Assuming that you have a relative parent element.
我几个月前又学了一个新把戏。假设您有一个相对父元素。
Here goes your absolute element.
这是你的绝对元素。
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
With this, I think it's a better answer than my old solution. Since you don't have to specify width AND height. This one it adapts the content of the element itself.
有了这个，我认为它比我以前的解决方案更好。因为你不需要指定宽度和高度。它调整元素本身的内容。
#7
23
to center a a position:absolute attribute you need to set left:50% and margin-left: -50% of the width of the div.
要将一个位置居中，您需要将其设置为:50%和空白-左侧:- div宽度的50%。
<!-- for horizontal -->
<style>
div.center{
width:200px;
left:50%;
margin-left:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered horizontaly
</div>
</body>
for vertical center absolute you need to do the same thing bud not with left just with top. ( NOTE: html and body must have min-height 100%; )
对于垂直中心绝对，你需要做同样的事芽，而不是只剩下顶部。(注意:html和body必须有100%的最小高度;)
<!-- for vertical -->
<style>
body,html{
min-height:100%;
}
div.center{
height:200px;
top:50%;
margin-top:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
and can be combined for both
两者都可以结合
<!-- for both -->
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height:50px
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered
</div>
</body>
#8
21
This worked for me:
这工作对我来说:
position: absolute;
left: 50%;
transform: translateX(-50%);
#9
16
<div class="centered_content"> content </div>
<style type="text/css">
.centered_content {
text-align: center;
position: absolute;
left: 0;
right: 0;
}
</style>
see demo on: http://jsfiddle.net/MohammadDayeh/HrZLC/
看到演示:http://jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center; works with a position: absolute element when adding left: 0; right: 0;
text-align:中心;与位置:添加左:0时的绝对元素一起工作;右:0;
#10
14
The simpler, the best:
简单,最好的:
img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
position: absolute;
}
Then you need to insert your img tag into a tag that sports position:relative property, as follows:
然后需要将img标签插入到运动位置:相对属性的标签中，如下所示:
<div style="width:256px; height: 256px; position:relative;">
<img src="photo.jpg"/>
</div>
#11
7
If you don't know the width of the element you can use this code:
如果您不知道元素的宽度，可以使用以下代码:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
Demo at fiddle: http://jsfiddle.net/wrh7a21r/
演示在小提琴:http://jsfiddle.net/wrh7a21r/
Source: https://*.com/a/1777282/1136132
来源:https://*.com/a/1777282/1136132
#12
5
I'm not sure what you want to accomplish, but in this case just adding width: 100%; to your ul#slideshow li will do the trick.
我不确定你想要完成什么，但在这种情况下，只要增加宽度:100%;对于你的ul#slideshow li将做这个魔术。
Explanation
The img tags are inline-block elements. This means that they flow inline like text, but also have a width and height like block elements. In your css there are two text-align: center; rules applied to the <body> and to the #slideshowWrapper (which is redundant btw) this makes all inline and inline-block child elements to be centered in their closest block elements, in your code these are li tags. All block elements have width: 100% if they are the static flow (position: static;), which is default. The problem is that when you tell li tags to be position: absolute;, you take them out of normal static flow, and this causes them to shrink their size to just fit their inner content, in other words they kind of "lose" their width: 100% property.
img标记是行内块元素。这意味着它们像文本一样在行内流，但也有一个宽度和高度，就像块元素一样。在css中有两个文本对齐:居中;应用于和#slideshowWrapper(它是冗余的)的规则使所有内联和内联块子元素都集中在它们最近的块元素中，在你的代码中这些是li标签。所有块元素都有宽度:如果它们是静态流(位置:static;)，则为100%，这是默认值。问题是，当您告诉li标记为position: absolute时，您将它们从正常的静态流中取出，这会导致它们缩小大小以适应它们的内部内容，换句话说，它们有点“丢失”它们的宽度:100%属性。
#13
5
Using left: calc(50% - Wpx/2); where W is the width of the element works for me.
左:calc(50% - Wpx/2);W是元素的宽度。
#14
3
An absolute object inside a relative object is relative to its parent, the problem here is that you need a static width for the container #slideshowWrapper , and the rest of the solution is like the other users says
相对于它的父对象而言，相对对象内的一个绝对对象，这里的问题是，您需要一个容器#slideshowWrapper的静态宽度，其余的解决方案就像其他用户说的那样。
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align:center;
width: 500px;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: relative;
left: 50%;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
http://jsfiddle.net/ejRTU/10/
#15
3
Here is easy and best solution for center element with “position: absolute”
这里有一个简单且最好的解决中心元素的“位置:绝对”
body,html{
min-height:100%;
}
div.center{
width:200px;
left:50%;
margin-left:-100px;/*this is 50% value for width of the element*/
position:absolute;
background:#ddd;
border:1px solid #999;
height:100px;
text-align:center
}
<style>
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>#16
3
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 // i.e. - 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!
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!
我希望这能有所帮助。好运！
#17
1
Position absolute takes it out of the flow, and places it at 0x0 to the parent ( Last block element to have a position absolute or position relative ).
Position absolute将它从流中取出，并将它放置在0x0到父元素(最后一个具有位置绝对或位置相对的块元素)。
I'm not sure what exactly you what you are trying to accomplish, It might be best to set the li to a position:relative and that will center them. Given your current CSS
我不确定你到底想要完成什么，最好是把li设为一个相对的位置:相对的，这将使它们居中。鉴于你目前的CSS
Check out http://jsfiddle.net/rtgibbons/ejRTU/ to play with it
请查看http://jsfiddle.net/rtgibbons/ejRTU/来播放它。
#18
1
#parent
{
position : relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25% /* images with aspect ratio: 16:9 */
}
img
{
height: auto!important;
width: auto!important;
min-height: 100%;
min-width: 100%;
position: absolute;
display: block;
/* */
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
I don't remember where I saw the centering method listed above, using negative top, right, bottom, left values. For me, this tehnique is the best, in most situations.
我不记得我在哪里见过上面列出的定心方法，使用的是上、右、下、左值。对我来说，这是最好的，在大多数情况下。
When I use the combination from above, the image behaves like a background-image with the following settings:
当我使用上面的组合时，图像就像一个背景图像，具有以下设置:
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
More details about the first example can be found here:
Maintain the aspect ratio of a div with CSS
关于第一个示例的更多细节可以在这里找到:使用CSS维护div的纵横比
#19
1
You can try this way :
你可以这样尝试:
* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative;
text-align: center;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg');
background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px;
display: inline-block; margin: auto; z-index: 999999; }<html>
<body>
<div id="body" class="container-fluid">
<!--Background-->
<!--Text-->
<div class="text">
<p>Random</p>
</div>
</div>
</body>
</html>#20
0
What seems to be happening is there are two solutions; centered using margins and centered using position. Both work fine, but if you want to absolute position an element relative to this centered element, you need to use the absolute position method, because the absolute position of the second element defaults to the first parent that is positioned. Like so:
似乎有两个解决方案;居中使用边距，居中使用位置。这两种方法都很好，但是如果您想要绝对定位一个相对于这个中心元素的元素，那么您需要使用绝对位置方法，因为第二个元素的绝对位置默认为所定位的第一个父元素。像这样:
<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
<p style="line-height:4;">width: 300 px; margin: 0 auto</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
<p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
Until I'd read this posting, using the margin:0 auto technique, to build a menu to the left of my content I had to build a same-width column to the right to balance it out. Not pretty. Thanks!
在我读到这篇文章之前，我必须使用margin:0 auto技术，在我的内容左边创建一个菜单，我必须在右边创建一个相同宽度的列来平衡它。不漂亮。谢谢!
#21
0
Use margin-left: x%; where x is the half of the width of the element.
使用margin-left:x %;x是元素宽度的一半。
#22
0
To center a “position: absolute” element.
将“位置:绝对”元素居中。
add these
添加这些
left: 0%;
right: 0%;
text-align: center;
or these
或者这些
left: 0%;
right: 0%;
margin: 0 auto;
element: position absolute
元素:绝对位置
.element {
position: absolute;
}
element centered
元素为中心
.element {
position: absolute;
left: 0%;
right: 0%;
text-align: center; // or this -> margin: 0 auto;
}
#23
-1
html, body, ul, li, img {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
#slideshowWrapper {
width: 25rem;
height: auto;
position: relative;
margin-top: 50px;
border: 3px solid black;
}
ul {
list-style: none;
border: 3px solid blue;
}
li {
/* center horizontal */
position: relative;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
/* center horizontal */
border: 3px solid red;
}
img {
border: 1px solid #ccc;
padding: 4px;
//width: 200px;
height: 100px;
}<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
<li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
<li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>
</ul>
</div>
</body>#1
894
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
#2
392
Without knowing the width/height of the positioned1 element, it is still possible to align it as follows:
在不知道positioned1元素的宽度/高度的情况下，仍然可以将其对齐如下:
例子
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
It's worth noting that CSS Transform is supported in IE9 and above. (Vendor prefixes omitted for brevity)
值得注意的是，IE9和以上版本支持CSS转换。(为了简洁，省略了供应商前缀)
Explanation
Adding top/left of 50% moves the top/left margin edge of the element to the middle of the parent, and translate() function with the (negative) value of -50% moves the element by the half of its size. Hence the element will be positioned at the middle.
添加50%的top/left将元素的top/left margin edge移动到父元素的中间，并使用(负)值-50%的translate()函数将元素的大小移动一半。因此元素将被放置在中间。
This is because a percentage value on top/left properties is relative to the height/width of the parent element (which is creating a containing block).
这是因为顶部/左侧属性上的百分比值相对于父元素的高度/宽度(它正在创建一个包含块)。
While a percentage value on translate() transform function is relative to width/height of the element itself (Actually it refers to the size of bounding box).
而translate()转换函数的百分比值相对于元素本身的宽度/高度(实际上是指边框的大小)。
For unidirectional alignment, go with translateX(-50%) or translateY(-50%) instead.
对于单向对齐，使用translateX(-50%)或translateY(-50%)。
1. An element with a position other than static. I.e. relative, absolute, fixed values.
1。具有非静态位置的元素。即相对、绝对、固定值。
#3
160
Centering something absolutely positioned is rather convoluted in CSS.
在CSS中，以绝对定位为中心是相当复杂的。
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
Change margin-left to (negative) half the width of the element you are trying to center.
将边缘向左更改为(负)要居中的元素宽度的一半。
#4
71
Div vertically and horizontally aligned center
垂直和水平对齐的中心。
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
Note : Elements should have width and height to be set
注意:元素应该设置宽度和高度
#5
42
A simple CSS trick, just add:
一个简单的CSS技巧，只需添加:
width: 100%;
text-align: center;
This works on both images and text.
这对图像和文本都有效。
#6
39
If you want to center an absolute element
如果你想把一个绝对元素居中
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered left to right, but not with top to bottom
如果你想要一个容器以左为中心，而不是从上到下。
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered top to bottom, regardless of being left to right
如果你想要一个容器从上到下居中，不管它是从左到右
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Update as of December 15, 2015
更新截至2015年12月15日
Well I learnt this another new trick few months ago. Assuming that you have a relative parent element.
我几个月前又学了一个新把戏。假设您有一个相对父元素。
Here goes your absolute element.
这是你的绝对元素。
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
With this, I think it's a better answer than my old solution. Since you don't have to specify width AND height. This one it adapts the content of the element itself.
有了这个，我认为它比我以前的解决方案更好。因为你不需要指定宽度和高度。它调整元素本身的内容。
#7
23
to center a a position:absolute attribute you need to set left:50% and margin-left: -50% of the width of the div.
要将一个位置居中，您需要将其设置为:50%和空白-左侧:- div宽度的50%。
<!-- for horizontal -->
<style>
div.center{
width:200px;
left:50%;
margin-left:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered horizontaly
</div>
</body>
for vertical center absolute you need to do the same thing bud not with left just with top. ( NOTE: html and body must have min-height 100%; )
对于垂直中心绝对，你需要做同样的事芽，而不是只剩下顶部。(注意:html和body必须有100%的最小高度;)
<!-- for vertical -->
<style>
body,html{
min-height:100%;
}
div.center{
height:200px;
top:50%;
margin-top:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
and can be combined for both
两者都可以结合
<!-- for both -->
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height:50px
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered
</div>
</body>
#8
21
This worked for me:
这工作对我来说:
position: absolute;
left: 50%;
transform: translateX(-50%);
#9
16
<div class="centered_content"> content </div>
<style type="text/css">
.centered_content {
text-align: center;
position: absolute;
left: 0;
right: 0;
}
</style>
see demo on: http://jsfiddle.net/MohammadDayeh/HrZLC/
看到演示:http://jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center; works with a position: absolute element when adding left: 0; right: 0;
text-align:中心;与位置:添加左:0时的绝对元素一起工作;右:0;
#10
14
The simpler, the best:
简单,最好的:
img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
position: absolute;
}
Then you need to insert your img tag into a tag that sports position:relative property, as follows:
然后需要将img标签插入到运动位置:相对属性的标签中，如下所示:
<div style="width:256px; height: 256px; position:relative;">
<img src="photo.jpg"/>
</div>
#11
7
If you don't know the width of the element you can use this code:
如果您不知道元素的宽度，可以使用以下代码:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
Demo at fiddle: http://jsfiddle.net/wrh7a21r/
演示在小提琴:http://jsfiddle.net/wrh7a21r/
Source: https://*.com/a/1777282/1136132
来源:https://*.com/a/1777282/1136132
#12
5
I'm not sure what you want to accomplish, but in this case just adding width: 100%; to your ul#slideshow li will do the trick.
我不确定你想要完成什么，但在这种情况下，只要增加宽度:100%;对于你的ul#slideshow li将做这个魔术。
Explanation
The img tags are inline-block elements. This means that they flow inline like text, but also have a width and height like block elements. In your css there are two text-align: center; rules applied to the <body> and to the #slideshowWrapper (which is redundant btw) this makes all inline and inline-block child elements to be centered in their closest block elements, in your code these are li tags. All block elements have width: 100% if they are the static flow (position: static;), which is default. The problem is that when you tell li tags to be position: absolute;, you take them out of normal static flow, and this causes them to shrink their size to just fit their inner content, in other words they kind of "lose" their width: 100% property.
img标记是行内块元素。这意味着它们像文本一样在行内流，但也有一个宽度和高度，就像块元素一样。在css中有两个文本对齐:居中;应用于和#slideshowWrapper(它是冗余的)的规则使所有内联和内联块子元素都集中在它们最近的块元素中，在你的代码中这些是li标签。所有块元素都有宽度:如果它们是静态流(位置:static;)，则为100%，这是默认值。问题是，当您告诉li标记为position: absolute时，您将它们从正常的静态流中取出，这会导致它们缩小大小以适应它们的内部内容，换句话说，它们有点“丢失”它们的宽度:100%属性。
#13
5
Using left: calc(50% - Wpx/2); where W is the width of the element works for me.
左:calc(50% - Wpx/2);W是元素的宽度。
#14
3
An absolute object inside a relative object is relative to its parent, the problem here is that you need a static width for the container #slideshowWrapper , and the rest of the solution is like the other users says
相对于它的父对象而言，相对对象内的一个绝对对象，这里的问题是，您需要一个容器#slideshowWrapper的静态宽度，其余的解决方案就像其他用户说的那样。
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align:center;
width: 500px;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: relative;
left: 50%;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
http://jsfiddle.net/ejRTU/10/
#15
3
Here is easy and best solution for center element with “position: absolute”
这里有一个简单且最好的解决中心元素的“位置:绝对”
body,html{
min-height:100%;
}
div.center{
width:200px;
left:50%;
margin-left:-100px;/*this is 50% value for width of the element*/
position:absolute;
background:#ddd;
border:1px solid #999;
height:100px;
text-align:center
}
<style>
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>#16
3
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 // i.e. - 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!
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!
我希望这能有所帮助。好运！
#17
1
Position absolute takes it out of the flow, and places it at 0x0 to the parent ( Last block element to have a position absolute or position relative ).
Position absolute将它从流中取出，并将它放置在0x0到父元素(最后一个具有位置绝对或位置相对的块元素)。
I'm not sure what exactly you what you are trying to accomplish, It might be best to set the li to a position:relative and that will center them. Given your current CSS
我不确定你到底想要完成什么，最好是把li设为一个相对的位置:相对的，这将使它们居中。鉴于你目前的CSS
Check out http://jsfiddle.net/rtgibbons/ejRTU/ to play with it
请查看http://jsfiddle.net/rtgibbons/ejRTU/来播放它。
#18
1
#parent
{
position : relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25% /* images with aspect ratio: 16:9 */
}
img
{
height: auto!important;
width: auto!important;
min-height: 100%;
min-width: 100%;
position: absolute;
display: block;
/* */
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
I don't remember where I saw the centering method listed above, using negative top, right, bottom, left values. For me, this tehnique is the best, in most situations.
我不记得我在哪里见过上面列出的定心方法，使用的是上、右、下、左值。对我来说，这是最好的，在大多数情况下。
When I use the combination from above, the image behaves like a background-image with the following settings:
当我使用上面的组合时，图像就像一个背景图像，具有以下设置:
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
More details about the first example can be found here:
Maintain the aspect ratio of a div with CSS
关于第一个示例的更多细节可以在这里找到:使用CSS维护div的纵横比
#19
1
You can try this way :
你可以这样尝试:
* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative;
text-align: center;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg');
background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px;
display: inline-block; margin: auto; z-index: 999999; }<html>
<body>
<div id="body" class="container-fluid">
<!--Background-->
<!--Text-->
<div class="text">
<p>Random</p>
</div>
</div>
</body>
</html>#20
0
What seems to be happening is there are two solutions; centered using margins and centered using position. Both work fine, but if you want to absolute position an element relative to this centered element, you need to use the absolute position method, because the absolute position of the second element defaults to the first parent that is positioned. Like so:
似乎有两个解决方案;居中使用边距，居中使用位置。这两种方法都很好，但是如果您想要绝对定位一个相对于这个中心元素的元素，那么您需要使用绝对位置方法，因为第二个元素的绝对位置默认为所定位的第一个父元素。像这样:
<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
<p style="line-height:4;">width: 300 px; margin: 0 auto</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
<p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
Until I'd read this posting, using the margin:0 auto technique, to build a menu to the left of my content I had to build a same-width column to the right to balance it out. Not pretty. Thanks!
在我读到这篇文章之前，我必须使用margin:0 auto技术，在我的内容左边创建一个菜单，我必须在右边创建一个相同宽度的列来平衡它。不漂亮。谢谢!
#21
0
Use margin-left: x%; where x is the half of the width of the element.
使用margin-left:x %;x是元素宽度的一半。
#22
0
To center a “position: absolute” element.
将“位置:绝对”元素居中。
add these
添加这些
left: 0%;
right: 0%;
text-align: center;
or these
或者这些
left: 0%;
right: 0%;
margin: 0 auto;
element: position absolute
元素:绝对位置
.element {
position: absolute;
}
element centered
元素为中心
.element {
position: absolute;
left: 0%;
right: 0%;
text-align: center; // or this -> margin: 0 auto;
}
#23
-1
html, body, ul, li, img {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
#slideshowWrapper {
width: 25rem;
height: auto;
position: relative;
margin-top: 50px;
border: 3px solid black;
}
ul {
list-style: none;
border: 3px solid blue;
}
li {
/* center horizontal */
position: relative;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
/* center horizontal */
border: 3px solid red;
}
img {
border: 1px solid #ccc;
padding: 4px;
//width: 200px;
height: 100px;
}<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
<li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
<li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>
</ul>
</div>
</body>