Question

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

有人可以伸出援手，帮助我让Sprites在移动设备上垂直对齐吗？

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

**全屏（有效）：**

**移动设备（无法使用）：**

这是我的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;
  }

Answer 1

将@media用于CSS。

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

如何使CSS Sprites与Mobile垂直对齐

1 个答案: