html / css - 尝试居中图像并忽略身体边距

时间：2012-10-30 04:06:20

标签： ios css webkit block centering

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

结果：

enter image description here

1 个答案:

答案 0 :(得分：1)

尝试：

.centerblock {
position:fixed;
top:10px;
left: 10px;
}

也许这可以提供帮助，虽然我不知道如果你转动手机会发生什么。

我会使主要内容区域适合显示边缘，并为每个元素定义所有对齐属性。

这从来都不是很聪明：

body {margin-left:30px;}
body {margin-right:30px;}

还有选项：

.main-container {
margin: 0 auto;
}

这也是所有内容的中心，但我认为，也无法解决您的问题。

相关问题
最新问题