引入
在前端学习中,如果想让一个小 div 在大的 div 里居中,并且是自适应的话,一般采用
小 div 绝对定位,大 div 相对定位,定位到大 div 的宽高一半的位置,再上下各 margin 负的小 div 宽高的一半
代码如下:
html:
<div class="father">
<div class="son"></div>
</div>
css:
*{
margin:0;
padding:0;
}
html,body{
width: 100%;
height: 100%;
}
.father{
width: 30%;
height: 30%;
margin: 0 auto;
position:relative;
}
.son{
position:absolute;
width: 50%;
height: 50%;
left:50%;
top:50%;
margin-left:-25%;
margin-top:-12.5%;
}
效果如图所示:
需要注意的是:
.son 里的 margin-top 的百分比是基于父元素而不是子元素本身,所以是 -12.5%,而不是 25%
下面回到我们要解决的问题来→
问题描述
上面的方法尽管都是用百分比来写,但也是大小 div 都已知宽高的情况
如果遇到了小 div 宽度未知的情况该如何让其在父元素里居中呢?
这个问题最常见的例子就是 ul 菜单列表在导航栏 nav 里居中,在我自己临摹静态页面的时候经常会遇到这个问题,但是还是萌新的我一直得不到解决方法,后来经过前辈指点才有了如下的解决方案
解决方法
给父元素设置 text-align:center;
给子元素设置 display:inline;
这样就可以解决这个问题,例子如下:
html:
<nav>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</nav>
css:
*{
margin:0;
padding:0;
}
html,body{
width: 100%;
height: 100%;
}
nav{
width: 100%;
height: 80px;
text-align: center;
border:2px #F66 solid;
}
ul{
list-style: none;
line-height: 80px;
display: inline-block;
border: 2px #66CCFF solid;
}
li{
float:left;
margin-left:40px;
font-size:30px;
}
li:nth-of-type(1){
margin-left:0;
}
效果如图所示:
需要说明的是:
1、为了让文字垂直居中,设置子元素的 line-height 属性值 = 父元素的高度
2、 为了让菜单之间有间隔,设置 li 的 margin-left 属性值,并把第一个 li 的 margin-left 属性值设为 0
学习心得
这次遇到的问题是我在画页面的时候经常会遇到的问题,在这里要感谢前辈的指导啦QUQ
以上