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

Question

这是我的网站.http://cheaandassociates.com/

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

嗯,这是我的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>元素上指定a 然后应用a text-align:center.图像元素<img>是内联元素,因此您不必使用margin:auto;它们居中对齐它们.

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

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