我有一个问题，居中有一个元素的属性位置设置为绝对。
有人知道为什么这些图像没有居中吗?
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>
你的图片没有居中，因为你的列表项没有居中;只有文本是居中的。您可以通过居中整个列表或居中列表中的图像来实现您想要的定位。
代码的修订版本可以在底部找到。在我的修改中，我将列表和其中的图像居中。
事实上，不能将位置设置为绝对的元素居中。
但是这种行为是可以模仿的!
注意:这些指令将适用于任何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>
我希望这对你们有帮助。好运！
