Foo.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="testStyle.css" />
</head>
<body>
The appearance of the text is good. This image should be centered, but it isn't:
<img class="centerblock" src="ice cream cone and dish.png" width="320" height="200"></img>
</body>
TestStyle.css:
body {margin-left:30px;}
body {margin-right:30px;}
.centerblock {
margin-left: auto;
margin-right: auto;
display: block;
}
结果:
最佳答案
尝试:
.centerblock {
position:fixed;
top:10px;
left: 10px;
}
也许这会有所帮助，虽然我不知道如果你打开手机会发生什么。
我会让主要内容区域适合显示的边缘，并为每个元素定义所有对齐属性。
这样做从来都不是很聪明:
body {margin-left:30px;}
body {margin-right:30px;}
还有一个选项:
.main-container {
margin: 0 auto;
}
这也是所有内容的中心，但我认为，也不能解决您的问题。
关于ios - html/css——试图居中图像并忽略正文边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13132497/