Question

我有以下html（minimal）模板：

<body>
    <div class="container">
        <div class="top"><img src="img/hyphen_top.png" width="177" height="150"/></div>
        <div class="bottom"><img src="img/hyphen_bottom.png" width="117" height="6"/></div>
    </div>
</body>

仅使用css，我想在页面/ scree中间对齐“top”div，在“top”div下对齐“bottom”div，边距为100px。我不能将顶部/底部以及主容器（“容器”）中的图像居中。

谢谢！

Answer 1

试试这个：

.container {
    text-align:center;
}
.bottom {
    margin-top: 100px;
}

jsfiddle here：http://jsfiddle.net/5xTLh/

Answer 2

这是Fiddle

.container {
  width: 600px;
  margin: 20px auto;
  border: 1px solid #333;
}
.top {
  width: 300px;
  margin: 20px auto;
  text-align: center;
}
.bottom {
  width: 300px;
  margin: 100px auto 0;
  text-align: center;
}

在屏幕中间对齐两个div，其中包含一个图像

2 个答案: