HTML网页编程的CSS中关于margin-top和margin-bottom的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML网页编程的CSS中关于margin-top和margin-bottom的问题相关的知识，希望对你有一定的参考价值。
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.main
background:#000;
width:300px;
height:400px;
margin:auto;
.up
border:2px solid #C0F;
padding:5px;
background:#FFF;
margin-left:auto;
margin-right:auto;
margin-top:336px;
height:50px;
width:100px;
</style>
</head>
<body><div class="main">
<div class="up">向下对齐</div>
</div>
</body>
如图，在DW中显示已经向下对齐，但在浏览器显示中却是
请高手帮忙看下是什么问题？求解答。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.main
background:#000;
width:300px;
height:400px;
margin:auto;
text-align:center;
position:relative;
.main .up
border:2px solid #C0F;
padding:5px 5px;
background:#FFF;
position:absolute;
top:336px;
left:100px;
height:50px;
width:100px;
</style>
</head>
<body>
<div class="main">
<div class="up">向下对齐</div>
</div>
</body>追问
我知道父类采用了position后，子类中就可以利用left,right,top,这些来进行定位。
但是为什么不能用margin-top和margin-bottom来进行垂直方向的定位呢？
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.main
background:#000;
width:300px;
height:400px;
margin:0 auto;
text-align:center;
vertical-align:bottom;
position:relative;
.up
border:2px solid #C0F;
text-align:center;
background:#FFF;
height:100px;
width:100px;
position:absolute;
bottom:0px;
</style>
</head>
<body>
<div class="main">
<div class="up">向下对齐</div>
</div>
</body>
你看看我这个的 第5个回答 2012-09-20 浏览器的问题吧 ，用IE的话应该可以的，我试过了。但是用谷歌的就是你说的那样了..其他浏览器不晓得怎么样..
使网页组合适用于每个窗口大小的 css
【中文标题】使网页组合适用于每个窗口大小的 css【英文标题】：make the webpage composition working on every window size css 【发布时间】：2016-01-15 18:36:04 【问题描述】：我想把按钮放到页面高度的中间
我试过这个：
顶部：50%；
但我在这里发现它不起作用，必须推动上边距
我找到了一个代码：margin-top: -300px;
我可以使用margin-top : -width:50% 这样的东西吗？这意味着按钮将在中间，我该如何编码？
如何将其 100% 居中，然后将按钮放在其下方，这样即使我调整窗口大小，第一个为 50%，第二个为 60%
【问题讨论】：
【参考方案1】：您可以简单地通过将其绝对定位在其父元素中来做到这一点，然后您可以通过翻译它来使按钮居中。
HTML
<body>
<div class="container">
<button>Centered button</button>
</div>
</body>
CSS
html, body
height: 100%;
margin: 0;
.container
position: relative;
height: 100%;
button
position: absolute;
top: 50%; //50% from top
left: 50%; //50% from left
//translate it so 50% from the width and heigth of the button will be subtracted thus centering the button
transform: translate(-50%, -50%);
工作 js 小提琴here。不要忘记添加供应商前缀！
另一个选项是 flexbox。你可以找到更多关于 flexbox 居中的信息here。
【讨论】：
以上是关于HTML网页编程的CSS中关于margin-top和margin-bottom的问题的主要内容，如果未能解决你的问题，请参考以下文章