Question

我正在使用一个内置移动设备的网站来滚动我在此处显示的椽子区域。

网站网址

http://www51.myfantasyleague.com/2017/options?L=24837&F=0001&O=01

正在使用的代码。

 <table style="table-layout:fixed;">   <tbody>
    <tr>
      <td class="mobile-view" style="vertical-align:top;">
        <div class="mobile-wrap">
         <center><img src="http://dagrafixdesigns.com/Images/2008/DA_2017/zWB_17/IRONMEN_MINI.png" /> </center> 
        </div>
      </td>
    </tr>   </tbody> </table>

STYLE SHEET

@media only screen and (max-width:48.000em){
 div.mobile-wrap > center > img {
     margin:0 auto 0px -296px;
  }
}

您将在桌面上看到，也许ipad视图看起来很漂亮且居中。

我试图在iPhone上实现在页面加载时查看横幅的横幅，我通过这种方式添加媒体查询-296px，但滚动此图像现在看看顶部暗条，它很短在一边而且很长在其他网站上，因为这个-296px ..

无论如何都要让这个图形在所有设备上正确加载中心，而向左或向右滑动在图形的两侧会有相同的结果吗？不像我现在使用-296值。？

可能还有一些img scr的内联html代码？我在那里有中心标签，它适用于桌面视图，因为它位于中心。

THX

Answer 1

您不需要<center>或媒体查询。要使图像在其容器中居中，请为其宽度的一半指定padding-left: 50%;和负margin-left：

.mobile-wrap {
  overflow: hidden;
}
img {  
  padding-left: 50%;
  margin-left: -425px; /* pixel value has to be half of the image width */
}

<div class="mobile-wrap">
   <img src="http://dagrafixdesigns.com/Images/2008/DA_2017/zWB_17/IRONMEN_MINI.png" /> 
</div>

让图片以移动网页浏览为中心

1 个答案: