javascript - 如何将图像对齐到 Div 的中心

Question

我正在使用 PHP 和 smarty，我试图让幻灯片的图像显示在提供的 div 中间，但无法完成。

下面是代码，有人能帮我解决我遗漏的问题吗？

代码:

<div class="home_slide_show">
  <!--start-image-slider---->
    <div>                                               
      <ul class="rslides" id="slider_cars">
       {section name=sec1 loop=$car_photos}
         <li><img src="{$car_photos[sec1].photo}" alt=""></li>
       {/section}
      </ul>
    </div>
  <!--End-image-slider---->
</div>

CSS:

.home_slide_show{
    background-color: white;
    border: solid thick grey;
    border-radius: 10px; 
    width:200px;
    height:200px;
}

.home_slide_show img{
    width:100%;
    height:100%;
    display: block;
}

完整的 HTML 代码:

 <div class="home_slide_show">
  <!--start-image-slider---->
  <div>
    <ul class="rslides rslides2" id="slider_cars">
      <li style="vertical-align: middle; display: block; float: none; position: absolute; opacity: 0; z-index: 1; transition: opacity 600ms ease-in-out;" id="rslides2_s0" class=""><img src="images/cars/download.jpg" alt=""></li>
      <li style="vertical-align: middle; float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides2_s1" class=""><img src="images/cars/images (1).jpg" alt=""></li>
      <li style="vertical-align: middle; float: left; position: relative; opacity: 1; z-index: 2; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides2_s2" class="rslides2_on"><img src="images/cars/images (2).jpg" alt=""></li>
      <li style="vertical-align: middle; float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides2_s3" class=""><img src="images/cars/images (7).jpg" alt=""></li>
      <li style="vertical-align: middle; float: none; position: absolute; opacity: 0; z-index: 1; display: list-item; transition: opacity 600ms ease-in-out;" id="rslides2_s4" class=""><img src="images/cars/images.jpg" alt=""></li>
    </ul>
  </div>
  <!--End-image-slider---->
</div>

Answer 1

用户代理将默认边距和填充添加到 ul 元素。两者都设置为零。