Question

我正在使用PHP＆amp;我很聪明，我试图让幻灯片的图像显示在提供的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元素添加默认边距和填充。两者都设置为零。

Answer 2

如果你想让它们居中，试试这个：

.img{
    width:100%;
    height:100%;
    display: block;
    margin: 0 auto;
}

还要看一下这篇文章：https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

如何将图像与Div的中心对齐

2 个答案: