Html 将对齐设置为<；中图像的中心；李>；

这是我的网站

我想将主页上横幅的对齐方式设置为居中

这是我的html

<div id="contentmain">
    <div class="bannerarea">
      <div class="slideShow">
        <ul class="slides" style="height: 908px; width: 1071px; overflow: hidden; display: block;">

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner1" src="images/logo48201140259.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner2" src="images/logo48201140327.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner3" src="images/logo48201140346.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide" style="position: absolute; display: none;"><img alt="Banner4" src="images/logo48201140411.jpg" style="margin-left: auto; margin-right: auto;"></li>

            <li class="slide selected" style="position: absolute; display: list-item;"><img alt="Banner5" src="images/logo48201140501.jpg" style="margin-left: auto; margin-right: auto;"></li>

        </ul>
      </div>
        <script type="text/javascript">
            $(document).ready(function() {
                // simplest example
                $('.slideShow').slideShow({
                    interval: 20,
                    repeat: false
                });
            });
        </script>        
    </div>
  </div>

$（文档）.ready（函数（）{
//最简单的例子
$（'.slideShow'）.slideShow({
间隔时间:20,，
重复：错
});
});

这里加载的图像是动态的，它们的大小可能会有所不同，因此如何将图像对齐设置为中心，以便即使宽度不同，也可以很好地显示它们

---

感谢您在ul幻灯片上设置了1071px的固定宽度。看起来您正试图以边距为中心：auto；在图像上（这很好），因此如果您将ul.slides上的宽度设置为最大图像的宽度（1227px），您应该会得到所需的结果

---

作为旁注，我建议减少这些图像的大小，因为它们既重（kb），又太宽。

在

元素上指定

宽度
，然后应用
文本对齐：居中
。图像元素
，因此您不必使用
边距：自动以使其居中对齐

<li class="slide" style="position: absolute; display: none; width: 1071px; text-align:center;">



。。。并尝试将所有
样式
移动到外部CSS文件；）
 我认为这不会起作用，因为
元素是绝对定位的。