如何使 CSS Sprites 为移动设备垂直对齐答案

【问题标题】：How to make CSS Sprites align vertically for Mobile如何使 CSS Sprites 为移动设备垂直对齐
【发布时间】：2018-07-04 14:39:57
【问题描述】：

我正在使用两个 CSS Sprite（每个都在自己的 div 中）在我的主页上显示 Android 和 Apple 徽标。在笔记本电脑上看起来不错，但是在较小的设备（即移动设备/小型浏览器）上查看时，它不能正确对齐（在中心）。

谁能帮助我让 Sprite 在移动设备上垂直对齐？

这是它在全屏和移动/小型浏览器中的样子：

**全屏（工作）：**

**手机（无法使用）：**

这是我的 HTML：

<body>
  <div class="main-container">

    <div class="left-image">
      <nav class="site-nav">
        <ul class="group">
          <li class="nav-android"><a href="#">Android</a></li>
        </ul>
       </nav>
    </div>

    <div class="right-image">
      <nav class="site-nav">
        <ul class="group">
          <li class="nav-ios"><a href="#">iOS</a></li>
        </ul>
      </nav>
    </div>
  </div>
</body>

这是我的 CSS：

.site-nav ul {
  margin: 0;
  padding: 0;
}

.site-nav li {
  position: relative;
  list-style: none;
  margin-top: 150px;
  left: 20%;
}

.site-nav a {
  display: inline-block;
  text-align: center;
  width: 300px;
  height: 350px;
  text-indent: 9999px;
  overflow: hidden;
}

.nav-android a {
  float: left;
  left: 50%;
  background-position: 0 0px;
  background-image: url(../images/android.png);
  background-repeat: no-repeat;
}

.nav-ios a {
  float: left;
  left: -50%;
  background-position: 0 0px;
  background-image: url(../images/apple.png);
  background-repeat: no-repeat;
}

@media screen and (max-width: 700px) {
  .nav-android a,
  .nav-ios a,
  {
    width: auto;
    float: none;
  }

【问题讨论】：

你确定这是一个精灵吗？我看到了 2 个不同的图像......也许你只需要 background-size:cover
感谢您的回复。这两张图片是使用 CSS Sprites 添加的，以便我稍后可以添加悬停效果。 html中没有标签。
你能创建一个 sn-p 或摆弄你的原始图像吗？

标签： html css mobile sprite

【解决方案1】：

对 css 使用 @media。

@media all and (max-width: 400px)
{
    .nav-android a, .nav-ios a {
        float: none;
        display: block;
        background-size: 128px 128px;
    }
}

编辑：也许您需要将其添加到头部：

<meta name="viewport" content="width=device-width, user-scalable=0"/>

	ul { margin: 0; padding: 0; }
	
	.group { margin-top: 10%; text-align: center; }
	.group li { display: inline-block; }
	.group li a { display: block; width: 256px; height: 256px; font-size: 0; }

	.nav-android a {
		background-size: 100%;
		background-image: url(android.png);
		background-repeat: no-repeat;
    background-color: green;
	}

	.nav-ios a {
		background-size: 100%;
		background-image: url(apple.png);
		background-repeat: no-repeat;
    background-color: grey;
	}

<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
  <div class="main-container">
    <ul class="group">
      <li class="nav-android"><a href="#">Android</a></li>
      <li class="nav-ios"><a href="#">iOS</a></li>
    </ul>
  </div>
</body>
</html>

【讨论】：

非常感谢！这非常有效。感谢您的帮助:)