我有一个问题，居中有一个元素的属性位置设置为绝对。
有人知道为什么这些图像没有居中吗?
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>
我希望这对你们有帮助。好运！
如果你想让一个绝对元素居中
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
如果你想让一个容器从左到右居中，而不是从上到下
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
如果你想让一个容器从上到下居中，不管从左到右
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
更新截止2015年12月15日
好吧，几个月前我又学了一个新把戏。假设您有一个相对的父元素。
这就是你的绝对元素。
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
有了这个，我认为这是一个比我以前的解决方案更好的答案。因为你不需要指定宽度和高度。这个调整了元素本身的内容。
更新截止2021年4月23日
它不能回答OP关于绝对位置的问题，但如果你想要替代解决方案，有一个叫做flexbox的方法。举个例子。
#parent {
display:flex;
align-items:center;
justify-content:center;
}
它所做的是将容器转换为flex并将子项对齐到水平的居中通过使用justify-content:center而垂直的则使用align-items:center。它也支持现代浏览器，所以使用起来很安全。
不过，一定要先阅读flexbox的工作原理。
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
支持Flexbox的浏览器
https://caniuse.com/flexbox
