Question

我想让'tinynav'手机屏幕的导航显示在任何设备的中心。

在这种情况下，我正在iPhone 4s和5上进行测试。我可以在纵向模式下完成此操作，但不能在横向模式下完成。我相信这是因为两个设备在纵向模式下共享相同，但在横向模式下不共享。

使用的媒体查询：

 /*iPhone 5 landscape*/

仅@media屏幕和（min-device-width：481px）和（max-device-width：568px）和（-webkit-min-device-pixel-ratio：2）和（orientation：landscape）{< / p>

#mainNav .tinynav {
display: inline-block;
padding: 0 !important;
right: 0;
border: 1px solid #000;
margin-left: 35% !important;
 margin-top: 7%;
}

/*iPhone until 4s landscape*/

@media only screen and（min-device-width：320px）and（max-device-width：480px）and（orientation：landscape）{

#mainNav .tinynav {
display: inline-block;
padding: 0 !important;
right: 0;
border: 1px solid #000;
margin-left: 51% !important;
margin-top: 7%;
}

我还尝试使用iPhone 5 Landscape的已知媒体查询：

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}

但没有运气，因为'margin-left：％！重要覆盖他们之间并且如果我不使用！important，那么浏览器不会呈现该命令。

所以我需要一个可以让自动居中的CSS。

我也试过了：

{保证金左：汽车;} {余量右：汽车}

但也没有结果。

这是fiddle

Answer 1

margin-left auto;
margin-right:auto;

如果为div定义宽度，

将起作用。

Answer 2

使用此：

.tinynav {
display: block;
padding: 0;
border: 1px solid #000;
margin:0 auto;
width:200px;
}

Answer 3

通过使.tinynav位置绝对，您可以在不设置px宽度的情况下居中。

.tinynav {
    width: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

div {
    position:relative
    border:1px solid black;
    height:568px;
}

CSS：在任何移动屏幕中居中导航

3 个答案: