1、居左：
对要靠左对齐（局左）的div样式加float:left。
示例代码：
css部分：
<style>
divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
HTML部分：
<div class="divcss5-left">此DIV靠左对齐显示</div>
2、居右：
对要靠右对齐（局右）的div样式加float:right。
示例代码：
css部分：
<style>
divcss5-right{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
HTML部分：
<div class="divcss5-right">此DIV靠右对齐显示</div>
3、居中：
对要居中对齐的div样式加margin:0 auto，不再需要加float样式。
示例代码：
css部分：
<style>
divcss5-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00}
</style>
<div class="divcss5-cent">此DIV居中右对齐显示</div>
扩展资料：
CSS清除浮动：
浮动：因为使用了float:left或float:right或两者都是有了而产生的浮动。
对父级设置适合CSS高度：
对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置。
示例代码：
css部分：
divcss5{ width:400px;border:1px solid #F00;background:#FF0; height:102px}
divcss5-left,divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
divcss5-left{ float:left}
divcss5-right{ float:right}
HTML部分：
<div class="divcss5">
<div class="divcss5-left">left浮动</div>
<div class="divcss5-right">right浮动</div>
</div>
<style>div {position:absolute; width:200px; height:400px}
divleft {left:0; background-color:red}
divcenter {left:50%; margin-left:-100px; background-color:green}
divright {right:0; background-color:blue}
</style>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>比如box是一个div,如下示例：
box{
float:left;}//向左浮动显示了
box{float:right;}//向右浮动显示了
box{width:980px;
margin:0px
auto}//居中显示了
box{margin-top:5px;margin-bottom:5px;margin-left:5px;margin-right:5px;padding-left:5px;}这个前面的分别是外面距，距上，下，左，右，后面是内边距距左，其它的也一样子的道理
在HTML调用有两种方法，第一种，直接把这个写在html的head文件里面，
在这里是CSS代码
，或者直接建CSS文件，把代码写里面，在HTML引入，
1、首先新建一个html文件，命名为testhtml。
2、然后在testhtml文件内，使用div标签创建两行文字，分别为测试一，测试二。
3、接着在testhtml文件内，分别给两个div标签添加id属性，分别为test1，test2。
4、在testhtml文件内，使用button标签创建一个按钮，给button按钮绑定onclick点击事件，当按钮被点击时，执行yidong()函数。
5、在js标签中，创建yidong()函数，在函数内，通过id(test2)获得第二个div对象，使用after()方法将第一个div移动至第二个div后面。
6、最后在浏览器打开testhtml文件，点击按钮，查看实现的效果。
<div style="height:1600px;">内容显示层</div><div id="leftdiv" style="position:absolute;z-index:1; left:10px;" >层内显示</div></body>
</html> 追问： 兄弟，我是问让div上下居中，并且靠右对齐你那个其实用position:fixed;就可以了 回答： <html>
<head><title>局中层</title></head>
<script language="javascript">
function yidong(){var abc = documentgetElementById("leftdiv");
abcstyledisplay='block';
abcstyleposition='absolute';
abcstyleleft=(documentbodyclientWidth-80)/2;
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）