CSS水平居中
2020-12-13 02:36
标签：style blog class code java tar 这里指的水平居中当然是说通过CSS来自动控制的，而不是说计算之后，设置一个位置来指定居中的。 一般情况下有三种实现方式： 在实现方式中，我们定义两个名词来方便后面的解说:out--包含需要被居中元素的那个容器，in--需要居中的元素。 1. text-align: center 2. margin-left : auto; margin-right: auto 3. 负外边距方式 三种方式用起来都比较简单，但是都有自己的适用范围，上面给出的是达到居中目标而需要的条件，其中标明红色的地方即是条件，也是方法的局限所在。 前两种的原理都比较好理解，第三种的原理稍微讲一下，也很好理解： 实际上主要是两步，第一把in通过left：50%移动到out的中间，如果in只是一条线，那么到这里其实工作已经完成了。但是如果in有宽度的话，那么就会发现它的做边框正好位于out的中间位置。ok， 很显然的，第二步我们要把in再往左移动in宽度的一半，即可让in的中间位于out的中间，即in居于out的中间。 下面以in和out都是div来举例，给出代码，代码中包含全部三种方式也可以直接点击下面的demo地址 http://demo.zhengjiachao.com/css/hori-center.html CSS水平居中,搜素材,soscw.com CSS水平居中 标签：style blog class code java tar 原文地址：http://www.cnblogs.com/labixiaodai/p/horizon_align_center.html
doctype html>
html>
head>
meta http-equiv="content-type" content="text/html; charset=UTF-8" />
script type="text/javascript" src="../resource/js/jquery-1.7.2.js">script>
style type="text/css">
.out{
height:200px;
background-color: orange;
margin : 10px;
}
.in{
width:100px;
height:100px;
background-color: gray;
}
.out.type-1{
text-align: center;
}
.in.type-1{
display: inline;
}
.in.type-2{
margin : 0 auto;
}
.out.type-3{
position: relative;
}
.in.type-3{
position: absolute;
left: 50%;
margin-left: -50px;
}
style>
head>
body>
div class="out type-1">
div class="in type-1">
1 text-align: center
div>
div>
div class="out type-2">
div class="in type-2">
2 margin: 0 auto;
div>
div>
div class="out type-3">
div class="in type-3">
3 负外边距
div>
div>
script type="text/javascript">
script>
body>
html>