Question

标记为我试图在身体中心的div。我希望中心发生在768px。

<div class="aside">
  <h2>CONNECT WITH ME</h2>
  <hr>
  <ul>
    <li><a href="https://stackoverflow.com/users/7637603/cerrach"><img style="height: 75px; width: 75px" src="assets/images/stack.png" alt="Stack Overflow"></a></li>
    <li><a href="https://github.com/cerrach"><img style="height: 75px; width: 75px" src="assets/images/git.png" alt="Github"></a></li>
    <li><a href="https://www.linkedin.com/in/christopher-cerrachio-131030138/"><img style="height: 75px; width: 75px" src="assets/images/in.png" alt="LinkedIn"></a></li>
  </ul>
</div>

为所述div设计样式

.aside{
  float: right;
  margin-right: 10px;
  margin-top: 20px;
  width: 40%;
  background: #7EA8BE;
  border-bottom: 3px solid #C2948A;
  padding: 5px;
  color: #fff;
  font-family: 'Antic Slab', sans-serif;
 }

所述div的媒体查询

@media screen and (max-width: 768px){

 .aside{
   width: 90%;
   clear: left;
   margin: 0 auto;
  }
 }

我已经广泛地寻找一个补救措施来解释为什么这个div没有居中，但我能找到的只是margin: 0 auto;答案。

如果所有这些信息都不够，我恳请您克隆此存储库。

https://github.com/cerrach/Responsive-Portfolio.git

Answer 1

.aside没有居中的原因是因为它上面有float: left。

通过向媒体查询添加float来移除float: none，它将正常运行。

请参阅以下工作代码段：

＆＃13;

.aside{
  float: right;
  margin-right: 10px;
  margin-top: 20px;
  width: 40%;
  background: #7EA8BE;
  border-bottom: 3px solid #C2948A;
  padding: 5px;
  color: #fff;
  font-family: 'Antic Slab', sans-serif;
 }
 
 @media screen and (max-width: 768px){
 .aside{
   width: 90%;
   float: none;
   clear: left;
   margin: 0 auto;
  }
 }

＆＃13;

<div class="aside">
  <h2>CONNECT WITH ME</h2>
  <hr>
  <ul>
    <li><a href="https://stackoverflow.com/users/7637603/cerrach"><img style="height: 75px; width: 75px" src="assets/images/stack.png" alt="Stack Overflow"></a></li>
    <li><a href="https://github.com/cerrach"><img style="height: 75px; width: 75px" src="assets/images/git.png" alt="Github"></a></li>
    <li><a href="https://www.linkedin.com/in/christopher-cerrachio-131030138/"><img style="height: 75px; width: 75px" src="assets/images/in.png" alt="LinkedIn"></a></li>
  </ul>
</div>

＆＃13;

Answer 2

你需要移除浮动：

@media screen and (max-width: 768px){

 .aside{
   width: 90%;
   float: none;
   margin: 0 auto;
  }
}

P.S。而不是恳求克隆一个ripo，只需在SO上创建一个片段：）

在body中居中div元素

2 个答案: