Ihre Bilder sind nicht zentriert, weil Ihre Listenelemente nicht zentriert sind; nur ihr Text ist zentriert. Sie können die gewünschte Positionierung erreichen, indem Sie entweder die gesamte Liste zentrieren oder die Bilder innerhalb der Liste zentrieren.
Eine überarbeitete Version Ihres Codes finden Sie am Ende der Seite. In meiner Überarbeitung habe ich sowohl die Liste als auch die Bilder in der Liste zentriert.
Die Wahrheit ist, dass Sie kann nicht ein Element zentrieren, dessen Position auf absolut gesetzt ist.
Aber dieses Verhalten kann nachgeahmt werden!
Hinweis: Diese Anweisungen funktionieren mit jedem DOM-Blockelement, nicht nur mit img.
-
Umgeben Sie Ihr Bild mit einem div oder einem anderen Tag (in Ihrem Fall ein li).
<div class="absolute-div">
<img alt="my-image" src="#">
</div>
Anmerkung: Die Bezeichnungen dieser Elemente sind nicht speziell.
-
Ändern Sie Ihr css oder scss, um das div absolut zu positionieren und Ihr Bild zu zentrieren.
.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;
}
Und da haben Sie es! Ihr Bild sollte zentriert sein!
Ihr Code:
Probieren Sie es aus:
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>
Ich hoffe, das war hilfreich. Viel Glück!
