0

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>

测试样式.css：

body {margin-left:30px;}
body {margin-right:30px;}
.centerblock {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

结果：

在此处输入图像描述

4

1 回答 1

1

尝试：

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

也许这会有所帮助，虽然我不知道如果你打开电话会发生什么。

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

这样做从来都不是很聪明：

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

还有一个选项：

.main-container {
margin: 0 auto;
}

这也集中了所有内容，但我认为，也不会解决你的问题。

于 2012-10-30T04:33:27.697 回答