我有一个问题，居中有一个元素的属性位置设置为绝对。
有人知道为什么这些图像没有居中吗?
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="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
<li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
</ul>
</div>
</body>
我不确定你想要完成什么，但在这种情况下，只是增加宽度:100%;到你的ul#slideshow li将做的把戏。
解释
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.
在不知道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%) */
}
值得注意的是，CSS Transform在IE9及以上版本中是受支持的。(为简洁起见，省略了供应商前缀)
解释
添加top/left为50%将元素的上/左边距移动到父元素的中间，(负)值为-50%的translate()函数将元素移动其大小的一半。因此，元素将被定位在中间。
这是因为顶部/左侧属性上的百分比值是相对于父元素的高度/宽度的(它正在创建一个包含块)。
而translate()转换函数上的百分比值是相对于元素本身的宽度/高度(实际上它指的是包围框的大小)。
对于单向对齐，使用translateX(-50%)或translateX(-50%)。
1. 具有非静态位置的元素。即相对的，绝对的，固定的值。
你的图片没有居中，因为你的列表项没有居中;只有文本是居中的。您可以通过居中整个列表或居中列表中的图像来实现您想要的定位。
代码的修订版本可以在底部找到。在我的修改中，我将列表和其中的图像居中。
事实上，不能将位置设置为绝对的元素居中。
但是这种行为是可以模仿的!
注意:这些指令将适用于任何DOM块元素，而不仅仅是img。
Surround your image with a div or other tag (in your case a 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.
.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;
}
现在你知道了!你的img应该居中!
你的代码:
试试这个吧:
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>
我希望这对你们有帮助。好运！
