CSS布局对齐⽅式--⽔平居中、垂直居中、⽔平垂直居中
⼀、⽔平居中:
(1)⾏内元素的⽔平居中
如果被设置的元素为⽂本、图⽚等⾏内元素时,在⽗元素中设置text-align:center实现⾏内元素⽔平居中,将⼦元素的设置为display:inline-block,使⼦元素变成⾏内元素;
<div class="parent" >
<div class="child" >demo</div>
</div>报告如何写
<style>
.parent {
text-align: center;
}
.child {
display: inline-block;
}
</style>
(2)块状元素的⽔平居中(定宽)
monsoon当被设置元素为定宽块级元素时⽤text-align:center;就不起作⽤了。可以通过设置“margin: 0 auto;”来实现居中的。
<div class="parent" >
<div class="child" >demo</div>
</div>
<style>
.child {
width: 200px;
margin: 0 auto;
}
</style>pulloff
(3)块状元素的⽔平居中(不定定宽)
在实际⼯作中,我们会遇到需要为“不定宽度的块级元素”设置居中,如⽹页上的分页导航,因为分页的数量是不确定的,所以,不能通过设置宽度来限制它的弹性。
可以直接给补丁款的块级元素设置text-align:center;来实现,也可以给⽗元素加text-align:center;来实现居中效果。
当不定宽块级元素的宽度不要占⼀⾏时,可以设置display为inline类型或inline-block(设置为⾏内元素显⽰或⾏内块元素)。
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<style>
.container {
text-align: center;
background: beige;
}
.
container ul {
list-style: none;
margin: 0;
加拿大硕士申请条件padding: 0;enter your code
prepare是什么意思display: inline-block;
}
.container li {
margin-right: 8px;
display: inline-block;
}
</style>
⼆、垂直居中
和⽔平居中⼀样,垂直居中,⾸先需设定两个条件即⽗元素是盒⼦容器且⾼度已经设定。
(1)⼦元素是⾏内元素,⾼度是由其内容撑开的。
这种情况下,需要通过设定⽗元素的line-height为其⾼度来使得⼦元素垂直居中。
<div class="wrap line-height">
<span class="span">111111</span>
</div>
<style>
.wrap {
width: 200px;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span {
background: red;
supermarket的音标}
</style>
(2)⼦元素是块级元素但⼦元素⾼度没有设定,在这种情况下,实际上是不知道⼦元素的⾼度的,⽆法通过计算得到padding或margin来调整。
可以通过给⽗元素设定display:table-cell;vertical-align:middle;来解决。
<div class="wrap">
<div class="non-height">111111</div>
</div>
(3)⼦元素是块级元素且⾼度已经设定
计算⼦元素的margin-top或margin-bottom,计算⽅法为⽗(元素⾼度-⼦元素⾼度)/ 2;
<div class="wrap">
<div class="div1">111111</div>
</div>
<style>
.wrap {
width: 200px;
height: 300px;
border: 2px solid #ccc;
}
.div1 {
width: 100px;
height: 100px;
margin-top: 100px;
background: darkblue;
}
</style>
三、⽔平垂直居中
(1)⽔平对齐+⾏⾼
text-align + line-height实现单⾏⽂本⽔平垂直居中
<style>
.test {
text-align: center;
line-height: 100px;
}
</style>
<div class="test" ></div>
(2)⽔平+垂直对齐
①text-align + vertical-align 在⽗元素设置text-align和vertical-align,并将⽗元素设置为table-cell元素,⼦元素设置为inline-block元素。<style>
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
<div class="parent" child" >测试⽂字</div>
</div>
②若⼦元素是图像,可不使⽤table-cell,⽽是其⽗元素⽤⾏⾼代替⾼度,且字体⼤⼩设为0。⼦元素本⾝设置vertical-align:middle;
<div class="parent" >
<img class="child" src="images/1.png" width="50%" alt="test">
</div>
<style>
.parent {
text-align: center;
line-height: 100px;
font-size: 0;
}
.child {
vertical-align: middle;
}
</style>
(3)相对+绝对定位
使⽤absolute,利⽤绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin: auto;
<div class="parent" child" >测试⽂字</div>阿甘正传下载
</div>ate fresh food什么意思
<style>
.parent {
position: relative;
}
.
child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 80px;
margin: auto;
}
</style>
PS:01、补充《三》中的⽔平垂直居中的⽅式(2018/08/29)
transactionid
translate()函数可以在不知道⾃⾝宽⾼的情况下,利⽤它进⾏⽔平垂直居中。但是,有兼容性问题,⽀持IE9+的游览器。
使⽤translate函数,配合left,top属性,可以让⽬标元素始终保持⽔平垂直居中,当游览器窗⼝发⽣变化时,也能⼀直保持⽔平垂直居中。<div class="wrap">
不知道宽⾼,可以⽔平垂直居中
</div>
<style>
.wrap {
padding: 10px;
background: green;
color: #fff;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%; /*定位margin-left:50%的位置*/
-webkit-transform: translate(-50%,-50%); /*Safari,Chrome*/
-moz-transform: translate(-50%,-50%); /*IE9+*/
transform: translate(-50%,-50%); /*使元素本⾝向左移动宽度的⼀半*/
/*transform使元素在当前位置分别往x轴,y轴正向平移⾃⾝宽度的⼀半距离。*/
}
</style>
02、补充《三》中的⽔平垂直居中的⽅式(2018/11/29)
场景:使⽤背景图⽚属性,使图⽚在⽗元素的盒⼦中始终居中,但是,背景图⽚的尺⼨⼤⼩不固定。
关键:background-position:center center;(background-position:50% 50%;)属性。
<div class="index-imgBlock">
<div class="index-image"></div>
</div>
<style>
.index-image {
height: 268px;/*选取三张图⽚中最⼤⾼度的尺⼨设定*/
width: 100%;
max-width: 484px; /*选取三张图⽚中的最⼤宽度的尺⼨设定*/
background: url(images/403.png); /*403图⽚尺⼨为484*206*/
/*background: url(images/404.png);*//*403图⽚尺⼨为428*268*/
/
*background: url(images/500.png);*//*500图⽚尺⼨为475*236*/
background-position: center center;
border: 1px solid #333333;
}
</style>