文章/答案/技术大牛

发布

社区首页 >问答首页 >将屏幕中间的两个div与其内部的图像对齐

问将屏幕中间的两个div与其内部的图像对齐
EN

Stack Overflow用户

提问于 2013-09-17 03:28:43

回答 2查看 50关注 0票数 0

我有以下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，我希望将" top“div对齐在页面/屏幕的中间，并将"top”div下的"bottom“div与页边距顶部100px对齐。我不能在顶部/底部居中，也不能居中主容器(“容器”)中的图像。

谢谢!

html

css

回答 2

Stack Overflow用户

发布于 2013-09-17 03:33:49

试试这个：

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

jsfiddle这里：http://jsfiddle.net/5xTLh/

票数 0

Stack Overflow用户

发布于 2013-09-17 03:34:26

这是一个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;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18835766

复制

相似问题

问将屏幕中间的两个div与其内部的图像对齐
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将屏幕中间的两个div与其内部的图像对齐EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将屏幕中间的两个div与其内部的图像对齐
EN