2015-04-05 53 views
0

我正在建設一個使用WordPress主題的網站,它應該是響應式的。問題在於頁腳。當您調整瀏覽器窗口的大小並使其更小時,頁腳的內容不居中。我認爲這是因爲每個文本的浮動。調整窗口大小時如何使其居中?定位頁腳內容

WEBSITE

<div class="site-info"> 
     <div style="margin:0 auto; width: 75%;"> 
     <p style="float:left;">&copy; Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p> 
     <div style="float:right;">Naleznete nás na sociálních sítích: 
      <a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a> 
      <a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a> 
     </div> 
     <div class="clear"></div> 
     </div> 
    </div><!-- .site-info --> 
+1

你想要居中什麼?版權?你顯然是漂浮在左側和右側的元素。 – Data2000 2015-04-05 14:59:00

+0

在p標記(.site-info p) – sinisake 2015-04-05 15:01:42

+0

'.site-info p {float:none;} .site-info {text-align:center;}這是我放入的媒體查詢中添加float:none媒體查詢最大寬度:800px,沒有任何反應...... @nevermind @ Data2000 – 2015-04-05 15:07:35

回答

0

設置文本寬度爲100%的父DIV已經允許文本在中心對準我。

<div class="site-info"> 
    <div style="margin:0 auto; width: 75%;"> 
    <p style="float:left; width:100%">&copy; Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p> 
    <div style="float:right; width:100%">Naleznete nás na sociálních sítích: 
     <a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a> 
     <a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a> 
    </div> 
    <div class="clear"></div> 
    </div> 
</div><!-- .site-info --> 

由於該div內的圖像鏈接,第二個div偏離中心。

0

對於社交媒體鏈接的div,你可以800像素下加入這一切你@media查詢:

http://imgur.com/rZz9Och

這應該圖像中居中像上面,如果這就是你'要去。