从堆叠的页脚的水平页脚

时间:2017-02-09 00:12:07

标签: html css

我想知道是否有人知道如何从堆叠的水平页脚中正确制作水平页脚。目前我有三行社交媒体图标,一个是我的名字,另一个是按钮。我希望它们在桌面中位于同一行并居中。如果有人能给我一些真正有帮助的建议!谢谢!



Sub UpdateRange()
Dim LastRow As Long
Dim RngCount as Range

Set RngCount = Sheets("Sheet2").Range("A1:A10")
LastRow  = Application.WorksheetFunction.CountA(RngCount)

Sheets("Sheet1").ChartObjects("Chart 1").Chart.SetSourceData Source:=Sheets("Sheet2").Range("A1:B" & LastRow)

End Sub

<script
			  src="https://code.jquery.com/jquery-1.11.3.min.js"
			  integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
			  crossorigin="anonymous"></script>             
<script src="SlickNav-master/dist/jquery.slicknav.js"></script>  
            
<script>
	$(function(){
		$('#menu').slicknav();
	});
</script>
&#13;
@media screen and (min-width: 568px){
  #powered_by_storenvy {display: none !important;}
}

@media screen and (min-width: 568px){ 
#footer_info {display: none;}
}
  #footer_links {
  position: relative;
  width: 100%;
  text-align: center;
  
  background: #1FA0A3;

  font-size: 16px;
  font-size: 1.6rem; 
    border-top: none;
    padding:20px; 
  
}

#footer_links ul {
   
    text-transform: uppercase;
    padding-left: 0; 
}

#footer_links li {
    line-height: 24px;line-height: 2.4rem; 
    list-style: none;
    background-color: #1FA0A3;      /*: Footer background :*/
    margin-bottom: 5px;margin-bottom: .5rem;
}

#footer_links ul a {
  color:black;
  text-decoration: none; /*: Footer Links :*/;
  padding: 0 6px;
	padding: 0 .6rem;
   
}

#footer_links a:hover {
  color: #BBBBBB;                   /*: Footer Links Hover :*/
}

.footer-small {
    font-size: 12px;
  font-size: 1.2rem; 
}


.ghost-button {
    color: black;
   
    border: 1px solid #009688;
    font-size: 17px;
    padding: 7px 12px;
    font-weight: normal;
    margin: 6px 0;
	width:250px;
    display: inline-block;
    text-decoration: none;
    font-family: 'Philosopher', sans-serif;
   
}

.ghost-button:hover, .ghost-button:active {
  color:#fff;
  background:#009688;
}
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

您可以使用@media查询和flexbox执行此操作。这样做,600px是您想要更改项目的断点。

@media (min-width:600px) {
  #footer_links ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}