|
1. 定位元素的水平居中
问题描述：使用了定位的DIv,如何在父元素中实现局中 解决方案：使用定位的元素，可以使用left:0 , right: 0 , margin:0 auto; 可以实现定位元素的水平居中 示例如下： <style>
#div1{
position: relative;
border: 1px solid red;
height: 50px;
}
#div2{
margin: 0 auto;
left:0;
right: 0;
position: absolute;
border: 1px solid black;
width: 80%;
height: 50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>2. 浮动元素的水平局中
问题描述: 浮动元素不能暂完整行时，如何让浮动元素在该行中水平局中。 解决方案：浮动元素是不能水平局中，我们要考虑将浮动元素放到一个DIV中，在将这个DIV水平局中. 示例如下： <style>
#div1{
border: 1px solid red;
height: 50px;
}
#temp{
margin: 0 auto;
position: absolute;
width: 80%;
left: 0;
right: 0;
}
#div2{
float: left;
border: 1px solid black;
width: 100%;
height: 50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="temp">
<div id="div2"></div>
<div style="clear: both"></div>
</div>
</div>
</body> |
|
|
公众号
