我正在使用两个 CSS Sprites(每个都在自己的 div 中)在我的主页上显示 Android 和 Apple Logo 。在笔记本电脑上看起来不错，但是，在较小的设备(即移动设备/小型浏览器)上查看时，它没有正确对齐(在中心)。
谁能帮我让 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;
}
最佳答案
使用@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>关于html - 如何使 CSS Sprites 垂直对齐移动设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51176181/