仅限 Bigcartel 手机答案

【问题标题】：Bigcartel mobile only仅限 Bigcartel 手机
【发布时间】：2016-06-08 06:04:59
【问题描述】：

我正在尝试显示我的 bigcartel 页面

<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>

它显示了一个版本的图像，但是当我在移动设备上查看时根本没有图像。

【问题讨论】：

标签： html css bigcartel

【解决方案1】：

主题的代码可以为您需要覆盖的自定义页面主体添加边距。将此添加到“自定义设计”>“高级”>“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>

【讨论】：

【解决方案2】：

我已经解决了您的问题，并为此找到了解决方案。请检查代码。

.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>

【讨论】：

我在哪里放置代码的上半部分，CSS？这也有助于使我的图像位于中间，这是我真正想要的，非常感谢。