Div 不以 iPad 媒体查询为中心

Question

在我的网站上：http://luukschroder.nl/test/test.html# 我正在插入媒体查询以在其他移动设备上正确显示内容。

在主站点上有两个 div（#wrap 和 #scrollbar）并排显示，我想在较小的移动设备（即 iPad）上将它们居中显示

这是样式表中的内容：

<style type="text/css">
@font-face {
font-family: 'RobotoMono Regular';
src: url('RobotoMono-Regular.ttf') format('truetype');
}
html *
{
font-size: 10pt !important;
color: #000 !important;
font-family: "RobotoMono Regular" !important;   
}
#scrollbar {
position:absolute;
right: 100;
width: 512px;
text-align: center;
}
#wrap {
float: left;
position: absolute;
left : 120px;
top: 40px;
}
</style>

etc.etc.

这就是媒体查询中的内容 css 适合 iPad 的大小：

<style type="text/css">
@font-face {
font-family: 'RobotoMono Regular';
src: url('RobotoMono-Regular.ttf') format('truetype');
}
html *
{
font-size: 10pt !important;
color: #000 !important;
font-family: "RobotoMono Regular" !important;
}
#scrollbar {
position:relative;
top:-150px;
width: 100%;
display: block;
margin-left: auto;
margin-right: auto; 
}
#wrap { 
width:100%;
position:relative;
top:-100px;
padding: 0px;
float:none;
display: block;
margin-left: auto;
margin-right: auto; 
}
</style>

这是我得到的结果：http://quirktools.com/screenfly/#u=http%3A//luukschroder.nl/test/test.html&w=768&h=1024&a=22

我似乎无法弄清楚我做错了什么......

非常感谢您的帮助！！

Answer 1

在您的媒体查询中：对于#scrollbar 和#wrap，尝试将display: block 更改为display: inline-block。然后添加 float: left

希望对您有所帮助！

Answer 2

您必须分别覆盖媒体 #wrap 和 #scrollbar 上的 left 和 rigt，因为这种风格会影响它们 position: relative，如下所示：

#wrap{
    left: auto;
}

#scrollbar{
    right: auto;
}

无论如何，按照 Lister 先生的建议修复 html 中的其他错误。

Div 不以 iPad 媒体查询为中心

Div's don't center with iPad media queries

html

css

media

center