Question

我确信这很简单，但我是css的新手。我基本上试图定位一些渲染的排版，并使其保持居中，无论浏览器的大小是多少。我已经尝试使用百分比的边距，但这似乎不起作用。

这是我的代码。

HTML

<div class="weare">
    <img src="image/textrenders/weare.png" />
</div>
<div class="shaftesburytv">
    <img src="image/textrenders/Shaftesburytv.png" />
</div>
<div class="awebbasedstudio">
    <img src="image/textrenders/awebbasedstudio.png" />
</div>

CSS

.weare {}

.shaftesburytv {}

.awebbasedstudio {}

我希望结果看起来像like this

任何帮助都将不胜感激。

Answer 1

简化您的内容：

<div id="container">
    <img src="http://placekitten.com/200/50">
    <img src="http://placekitten.com/300/100">
    <img src="http://placekitten.com/250/75">
</div>

然后确保容器与最大包含图像具有相同的宽度，并将margin:0 auto;应用于中心。最后将display:block放在图像上，使它们全部垂直堆叠：

#container {
    margin:100px auto;
    width:300px;
}
#container img {
    display:block;
}

Sample here

或者，如果你也想垂直居中，你也可以使用绝对定位，然后在对象的绝对大小上使用负边距 - 因为图像尺寸是固定的，所以没问题：

#container {
    margin-left:-150px;
    margin-top:-112px;
    left:50%;
    position:absolute;
    top:50%;
}
#container img {
    display:block;
}

Sample of this approach here

Answer 2

由于你正在使用图像，你可以

margin: 0 auto;

对他们来说。对于文本，您可以

text-align:center;

使用div s，您还可以center align（HTML格式）。

您还可以使用center代码：http://jsfiddle.net/A33J2/

Answer 3

这可能很简单。

如果您不拆分图像并将其所有文本合并为一个。

HTML

<img id="my-whole-image" src="http://placekitten.com/300/250" />

CSS

#my-whole-image {
    margin-left:-150px;
    margin-top:-125px;
    left:50%;
    position:absolute;
    top:50%;
    display:block;
}

jsFiddled here

只是一个提示，因为你说你是css的新手，我认为你也是html的新手：总是使用构建你的网页所需的最低要求。由于服务器请求，带宽，浏览器重绘，dom元素编号等多种原因，这3张图片已合并为一个。

如何用css准确定位div

3 个答案: