Question

我试图将徽标和菜单列表放在页面中央（将它们并排放在桌面视图中）并堆叠在移动视图中。我的问题是让它们整齐地堆叠在移动视图中。出于某种原因，当它进入移动设备时，所有项目都会被推倒。我还试图让社交媒体链接保持在所有设备的视口底部。

这是我的代码：

HTML：

<div class = "container">
<div class="block" style="height: 600px;">
<div class="centered centered-mobile">

<img src="http://allprofitorganization.com/wp-content/uploads/2017/08/home-logo-delete.png" />

</div>
<div class="centered vertical-menu">

<a href="#">EVENTS</a>
<a href="#">STORE</a>
<a href="#">ARTISTS</a>

</div>  
</div>

<div id="manu-social" class="manu">
    <div id="manu-social" class="manu"></div>
 <ul id="manu-social-items" class="manu-items">      
 <li><a href="https://www.facebook.com/allprofitofficial" target="_blank"></a></li>      
 <li><a href="https://twitter.com/realallprofit" target="_blank"></a></li>       
 <li><a href="https://instagram.com/allprofitofficial" target="_blank"></a></li>         
 </ul>       
</div>

</div>

CSS：

body {
    background: #fff;
}
img{
  width: 270px;
  height: 100%;
}

.block {
  text-align: center !important;
  margin: 80px !important;
  HEIGHT: 300px;
}

.block:before {
  content: '\200B';
/*   content: '';
  margin-left: -0.25em; */
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  margin: 15px;
 }

.logo
{
    float: left;
    vertical-align: middle;
    width: 300px;
  margin: 15px;
}

.nav
{
     float: right;
    vertical-align: middle;
    width: 300px;
  margin: 15px;
}

.vertical-menu {
    width: 85px;
}

.vertical-menu a {
    font-size: 16px !important;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;

  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

.vertical-menu a:hover {
  color: red !important;

}

.vertical-menu a.active {
    background-color: #4CAF50;
    color: white;
}




#manu-social {
padding: 20px 0;
}
#manu-social ul {
list-style: none;
text-align: center;
margin: 0;
padding: 10px 0;
}
#manu-social ul li {
display: inline-block;
position: relative;
}
#manu-social li a {
color: #D3D3D3;
margin: 0 10px;
}
#manu-social li a:hover {
color: red;
}
#manu-social li a::before {
    content: "\f135";
    display: inline-block;
    padding: 0 5px;
    font-family: FontAwesome;
    font-size: 24px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#manu-social li a[href*="facebook.com/allprofitofficial"]::before {
    content: "\f09a";
}
#manu-social li a[href*="twitter.com/realallprofit"]::before {
    content: "\f099";
}
#manu-social li a[href*="instagram.com/allprofitofficial"]::before {
    content: "\f16d";
}

a {
-webkit-transition: .15s all linear;
-moz-transition: .15s all linear;
-o-transition: .15s all linear;
transition: .15s all linear;
}

@media screen and (max-width: 960px) { /* whatever width you prefer */
  .nav, .logo {
    float:none;
    position: static;
    /* width: auto; -- may be helpful */  
  }
}

@media screen and (max-width: 720px) {
  .nav {
    /* display: none; —- remove the menu, perhaps */
  }
}

@media print, screen and (max-width: 480px) {
  .content, .menu {
    /* more targetting -- usually margins and padding adjusting */
  }
}

Answer 1

您可以像这样创建一个固定的页脚，

#footer {
  position:fixed;
  left:0px;
  bottom:0px;
  height:30px;
  width:100%;
  background:#999;
}

所以将此代码应用于您的社交图标，如果您只想在移动视图页面底部将它们放在页面底部，那么它们将始终位于页面底部，然后将其包装在媒体查询中，就像其他内容一样。页脚仅固定为负余量margin: - //whatever number looks right

Answer 2

您可以使用flexbox在桌面上垂直和水平居中徽标和导航，然后只需更改移动设备的flex-direction即可将其叠加。

.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 480px) {
  .block {
    flex-direction: column;
  }
}

水平和垂直居中容器（带有响应元件）

2 个答案: