Question

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

嗯，这是我的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>

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

由于

Answer 1

在width元素上指定<li>，然后应用text-align:center。图片元素<img>为inline elements，因此您无需使用margin:auto;对齐它们。

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

...并尝试将所有style移动到外部CSS文件;）

Answer 2

您在ul.slides上设置了固定宽度1071px。看起来你正试图以保证金为中心：auto;在图像上（这很好），所以如果你将ul.slides的宽度设置为最大图像的宽度（1227px），你应该得到所需的结果。

作为旁注，我建议减少那些重（kb）和太宽的图像的大小。

在<li> </li>中将对齐设置为图像的中心

2 个答案: