css - 媒体查询样式不起作用

Question

出于某种原因，当我调整浏览器大小时或在移动设备上查看页面时，.headPhone 会保持在右侧。我想取消 float 或添加一些边距，以便它以较小的显示为中心。我怎样才能做到这一点？

HTML

<div class="headDiv">
    <div class="headPhone">
        <p class="fa fa-phone fa-xlg">000000</p>
    </div>
</div><!--headDiv-->

CSS

.headDiv {display:block; max-width:100%;}
.headPhone {float:right;}

@media (max-width: 768px) {
   .headDiv .headPhone {float:none; margin: 0 auto;}
}

Answer 1

您可以使用 display:table 这样 div 会自动缩小以适应内容。

http://jsfiddle.net/Lb7ky6vL/

@media (max-width: 768px) {
    .headDiv .headPhone {
        float: none;
        display: table;
        margin: 0 auto;
    }
}