如何让CSS Sprite在移动环境中垂直对齐
如何让CSS Sprite在移动环境中垂直对齐
提问于 2018-07-04 22: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;
}回答 1
Stack Overflow用户
发布于 2018-07-05 01:31:51
对css使用@media。
@media all and (max-width: 400px)
{
.nav-android a, .nav-ios a {
float: none;
display: block;
background-size: 128px 128px;
}
}编辑:也许你需要在head中添加这个：
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51176181
复制相关文章
相似问题