Question

我在页脚下使用了一个简单的部分。在我的媒体查询640px或更低版本中，这两行不会以添加text-align: center为中心。我也试过margin: 0 auto，但这对我也不起作用。

为什么这两段不是居中的？这很简单，但我只是遗漏了一些东西。

＆＃13;

#copyright {
	width: 100%;
	/*padding: 10px 10%;*/
	color: #999999;
	background: #1B1B1B;
	font-family: Verdana, Geneva, sans-serif;
	position: relative;
	clear: both;
}
#copyright a {
	color: #999999;
}
#copyright_left {
	float: left;
	text-align: left;
	margin-left: 10%;
}
#copyright_right {
	float: right;
	margin-right: 10%;
}

/*----------------------------------------------PHONE MEDIA QUERY 640--------------------------------------------*/

@media screen and (max-width:640px) {
/*---Copy Right ---*/
#copyright {
	font-size: .9em;
  text-align: center;
}
#copyright_left {
	text-align: center;
}
#copyright_right {
	text-align: center;
}
}

＆＃13;

<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>

＆＃13;

Answer 1

似乎你错过了将你的浮动设置为无。如果它仍未居中，请尝试查找覆盖媒体查询声明的任何其他CSS。

编辑：你的利润也是如此。

Answer 2

你已经在主css中给了浮点数，所以在响应式css中你必须禁用浮点数，因为浮点text-align:center和margin: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;
}
}

元素不以text-align：center为中心

2 个答案: