在身体中居中一个div元素

我试图在身体中居中的div的标记。我希望居中发生在768px。在身体中居中一个div元素

<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

来源

2017-08-26 cerrach

中心垂直或水平？ –

@cale_b水平 – cerrach

如果您尝试将'.aside'居中，则需要在媒体查询中从其中移除'float'：'float：none;' –

原因.aside不居中是由于它有它float: left。

删除float通过将float: none添加到媒体查询，它将正常工作。

参见下面的工作片段：

.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; 
 
    } 
 
}

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

来源

2017-08-26 20:22:09

您需要删除浮动：

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

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

附：而不是恳求克隆RIPO，只需所以这里创建一个片段:)

来源

2017-08-26 20:21:42 quirimmo

这是@cale_b提出的相同解决方案。这工作得很好。谢谢 – cerrach

抱歉之前没有读过它 – quirimmo

在身体中居中一个div元素

回答

相关问题