我有一个问题，居中有一个元素的属性位置设置为绝对。
有人知道为什么这些图像没有居中吗?
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.
目前似乎有两种解决方案;边距居中，位置居中。这两种工作都很好，但是如果您想要相对于这个居中元素的绝对位置，则需要使用绝对位置方法，因为第二个元素的绝对位置默认为所定位的第一个父元素。像这样:
<!-- 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>
直到我读到这篇文章，使用边距:0自动技术，在我的内容的左边建立一个菜单，我必须在右边建立一个相同宽度的列来平衡它。不漂亮。谢谢!
你的图片没有居中，因为你的列表项没有居中;只有文本是居中的。您可以通过居中整个列表或居中列表中的图像来实现您想要的定位。
代码的修订版本可以在底部找到。在我的修改中，我将列表和其中的图像居中。
事实上，不能将位置设置为绝对的元素居中。
但是这种行为是可以模仿的!
注意:这些指令将适用于任何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>
我希望这对你们有帮助。好运！
