2016-03-22 42 views
2

我有一个简单的部分,我正在使用我的页脚下。在我的媒体查询640px或更少,这两行不会中心添加text-align: center。我也试过margin: 0 auto,但那也不适合我。元素不以文本对齐为中心:添加中心

这两段为什么不是中心?这很简单,但我只是想念一些东西。

#copyright { 
 
\t width: 100%; 
 
\t /*padding: 10px 10%;*/ 
 
\t color: #999999; 
 
\t background: #1B1B1B; 
 
\t font-family: Verdana, Geneva, sans-serif; 
 
\t position: relative; 
 
\t clear: both; 
 
} 
 
#copyright a { 
 
\t color: #999999; 
 
} 
 
#copyright_left { 
 
\t float: left; 
 
\t text-align: left; 
 
\t margin-left: 10%; 
 
} 
 
#copyright_right { 
 
\t float: right; 
 
\t margin-right: 10%; 
 
} 
 

 
/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------------------------*/ 
 

 
@media screen and (max-width:640px) { 
 
/*---Copy Right ---*/ 
 
#copyright { 
 
\t font-size: .9em; 
 
    text-align: center; 
 
} 
 
#copyright_left { 
 
\t text-align: center; 
 
} 
 
#copyright_right { 
 
\t text-align: center; 
 
} 
 
}
<div id="copyright"> 
 
    <p id="copyright_left">&copy; 2016 -All Rights Reserved- <a href="index.php">EquipmentInsider.com</a></p> 
 
    <p id="copyright_right"><a href="About-us.php">About Us</a> | <a href="Contact-us.php">Contact</a> | <a href="Terms-of-Agreement.php">Terms of Agreement</a></p> 
 

 
    <br class="clear" /> 
 
    </div>

回答

1

你已经给你的主css漂浮,所以在响应的CSS你必须禁用浮动,因为浮动text-align:centermargin:0 auto不起作用。看看下面的css

@media screen and (max-width:640px) { 
/*---Copy Right ---*/ 
#copyright { 
    font-size: .9em; 
    text-align: center; 
} 
#copyright_left { 
    text-align: center; 
    float:none; 
} 
#copyright_right { 
    text-align: center; 
    float:none; 
} 
} 
+0

'float:none'是否带走边距或高度?我现在在这部分上面得到一个空白区域。 – Becky

+0

no'float:none'不会影响保证金或高度,一定有其他一些问题,请分享截图或小提琴找出它 –

+0

照片添加到我的问题。 – Becky

1

您似乎缺少YOUT花车设置为none。如果它仍然不居中,请尝试查找覆盖媒体查询声明的任何其他css。

编辑:你的利润率也是一样。

+0

这太疯狂了,当我这样疲惫的时候如此想念这么简单的事情。出于某种原因,这使得股票下跌一点。任何想法为什么? – Becky

+0

浮动元素改变了元素布局的方式。 Yout br元素不再清除漂浮物,因为没有。这可能是原因。 – Scorer