Question

我使用这个HTML代码：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div id="icons-wrapper">
        <ul class="social-icons icon-circle icon-zoom list-unstyled list-inline center-icons1"> 
                    <li> <a href="#"><i class="fa fa-facebook"></i></a></li> 
              <li> <a href="#"><i class="fa fa-instagram"></i></a></li>    
        </ul>

        <hr />
        <ul class="social-icons1 icon-circle list-unstyled list-inline center-icons2"> 
      <li > <a><i class="fa fa-windows"></i></a></li>   
     <li> <a><i class="fa fa-apple"></i></a> </li>
         <li><a><i class="fa fa-android"></i></a> </li>

        </ul><br>


                <p id="socialtext">Tested operating systems<br>
in top 5 web browsers <br>
including mobile and desktop </p>
        </div>

这就是css：

#icons-wrapper {width:100%;height:100%;margin-top:-13.5%;transform: translateX(50%);}

.center-icons1 {display:inline-block;margin-left:3.69%;}

.center-icons2 {display:inline-block;margin-left:1.665%;}

#socialtext {display:inline-block;margin-left:.46%;text-align:center;margin-top:1vmax;font-size:1.1vmax;}

#logofooter {width:25vmax;display:inline-block;margin-top:10.5%;margin-left:10.5%;}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline li {
    display: inline-block;
    padding-right: 0.2vmax;
    padding-left: 0.2vmax;
    }


/*Change icons circle size and color here*/
hr{ width:15vmax;
    margin: .8vmax .8vmax;
    border-top:0.1vmax solid black;
    border-bottom:0.1vmax solid grey;
    opacity:.4;
}

/*---- Genral classes end -------*/

/*Change icons size here*/
.social-icons .fa {
    font-size: 1.8vmax;

}

.social-icons1 .fa {
    font-size: 1.8vmax;

}
/*Change icons circle size and color here*/
.social-icons .fa {
    width: 3.3vmax;
    height: 3.3vmax;
    line-height: 3.3vmax;
    text-align: center;
    color: #FFF;
    color: rgba(255, 255, 255, 0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.social-icons1 .fa {
    width: 3.3vmax;
    height: 3.3vmax;
    line-height: 3.3vmax;
    text-align: center;
    color: #FFF;
    color: rgba(255, 255, 255, 1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa{ 
    border-radius: 50%;
}

.social-icons1.icon-circle .fa{ 
    border-radius: 50%;
}

.social-icons .fa:hover, .social-icons .fa:active {
    color: #FFF;
    -webkit-box-shadow: 0.1vmax 0.1vmax 0.3vmax #333;
    -moz-box-shadow: 0.1vmax 0.1vmax 0.3vmax #333;
    box-shadow: 0.05vmax 0.05vmax 0.3vmax #333;
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active { 
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); 
}



.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}  
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons1 .fa-apple{background-color:#aeb5c5;cursor:default;} 
.social-icons1 .fa-android{background-color:#A5C63B;cursor:default;}  
.social-icons1 .fa-windows{background-color:#12B6F3;cursor:default;}

所以我注意到#socialtext有时会向左或向右移动其他屏幕尺寸（手机）。我有.center-icons1 {display:inline-block;margin-left:3.69%;}和.center-icons2 {display:inline-block;margin-left:1.665%;}。

center-icons1是facebook和instagram徽标，在其他屏幕尺寸上也会有一点水平变化。

而center-icons2是Windows / Apple和Android徽标，它们从不向左或向右移动，这是奇怪的（我认为）。

我也有一条hr线，有时也会改变宽度。我尝试使用百分比和vmax来表示响应性。

是否有一种方法可以将文本hr行和图标保持在1个位置，而不会在移动设备上左右移动（并且hr行保持为所需的宽度）。

让图标和文本在每个屏幕大小的相同位置

0 个答案: