我正在尝试显示我的大卡特尔页面
<div style="margin-top: 0px; img align: middle">
<a href="/products"><img width="420" height="42" style="vertical-align:middle;" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY"></a>
</div>
仅在移动设备上尝试仅显示浏览器代码的精确副本这是页面http://pafclub.bigcartel.com/entry
这就是我到目前为止所拥有的:
<div class="mobileHide">
<div style="margin-top: 0px; img align: middle">
<a href="/products"><img width="420" height="42" style="vertical- align:middle;" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY"></a> </div>
<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}
</style>
<div class="mobileShow">
<div style="margin-top: 120px; margin-bottom: 10px; text-align: center;">
<a href="/products"><img width="420" height="42" style="vertical-align:middle;" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY"></a>
</div>
<style type="text/css">
.mobileShow { display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>
它显示了图像的一个版本,但是当我在移动设备上检查时,根本没有图像。
该主题包含的代码,该代码将边距添加到需要覆盖的自定义页面正文中。将其添加到自定义设计>高级> CSS 的底部以将其删除:
#entry .page {
margin: 0 auto;
}
然后,对于您的入口页面,您只需要以下代码即可使图像显示正确居中(在桌面和移动设备上)
<a href="/products">
<img style="width:100%;margin:0 auto;max-width: 427px;display:block" src="https://i.imgsafe.org/7da3920e19.png" alt="ENTRY">
</a>
我已经解决了您的问题,并为此找到了解决方案。请检查代码。
.mobileHide { display:table; height:100%; text-align:center; vertical-align:center; width:100%;}
.middle{ display:table-cell; height:100%; vertical-align:middle; width:100%;}
.middle a{ max-width:80%; display:inline-block;}
.middle a img{ max-width:100%;}
html, body {
height: 100%;
margin: 0px;
}
<div class="mobileHide">
<div class="middle">
<a href="/products">
<img width="420" height="" src="https://i.imgsafe.org/52c5068376.png" alt="PAF ENTRY">
</a>
</div>
<div style="clear:both;"></div>
</div>