波动后的li元素垂直居中完成方式

日期:2021-03-12 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

例如有以下所示HTMl编码:

拷贝编码
编码以下:

<div class="demo">
<ul>
<li><a href="#">我垂直居中了</a></li>
<li><a href="#">我垂直居中了</a></li>
<li><a href="#">我垂直居中了</a></li>
<li><a href="#">我垂直居中了</a></li>
<li><a href="#">我垂直居中了</a></li>
</ul>
</div>

作为的是水平导航栏条时,有下列3种方法:
1、对ul应用"text-align: center;"的方法,随后把li变换为inline元素,设定內外边距能够获得实际效果,编码以下:

拷贝编码
编码以下:

* {
margin: 0;
padding: 0;
}
body {
background: #000;
color: #FFF;
font: 12px/1.5 Tahoma,Arial;
}
.demo {
border: 1px solid #CCC;
line-height: 27px;/* 假如有左右边框,务必设定行高使左右边框显示信息出来,行高不管是承继的還是给定的,测算的結果务必不小于27px,这里27=15+5+5+1+1,至于字体样式12px尺寸,为何FF查询盒子实体模型中高为15px,我也不懂,请高人指导迷津 */
margin: 5px auto;
overflow: hidden;
width: 1430px; /* 给包括ul的盒子设定宽度为访问器对话框的物理学宽度(我显示信息器19寸,类似1430px宽),发现li的內容依然垂直居中,表明不管是是不是定宽,li变换成inline元素都可以使li內容垂直居中 */
}
.demo ul {
text-align: center;
margin: 2px 0;/* 让外边框显示信息出来 */
}
.demo ul li {
border: 1px solid #555;
display: inline;
padding: 5px;
list-style: none;
margin: 10px;/* 变换成inline元素以后,发现左右外边距无效(实际上是内陷,可使用行高调剂),这个尽量掌握 */
}
a {
color: #FFF;
text-decoration: none;
}
a:link, a:visited {}
a:hover {
color: #F60;
}

这里表明1下,以便更直观的呈现是不是垂直居中,我给.demo这个盒子加上了边框,给每一个<li>也加上了边框,具体实际操作时将会不必须边框。
这类做法的缺陷是左右外边距无效(实际上是内陷,可使用行高调剂),务必界定盒子的行高使得左右边框显示信息出来;并且li变换成inline元素,不可以够再界定宽高。
2、对li应用波动(一般是"float: left")的方法。可是会发现目录项没法垂直居中显示信息,它们一直沿波动的方位对齐。以便处理垂直居中难题,务必对包括ul的父元素应用padding或对ul应用margin完成:

拷贝编码
编码以下:

.demo ul {
float: left;
text-align: center;
margin-left: 500px;/* 用margin或对.demo用padding完成垂直居中,十分的不灵便,假如li个数提升,边距务必再调剂。现阶段我都还没寻找能取代的方式,望大虾们指导^_^ */
}
.demo ul li {
border: 1px solid #555;
float: left;
padding: 5px;
list-style: none;
margin: 10px;
}

缺陷如注解所示,已不赘述。
3、1种非常好的方法,便是用相对性精准定位完成“float:center”,参照蓝色理想化macji的做法:跨访问器完成float:center

拷贝编码
编码以下:

.demo {
border: 1px solid #CCC;
margin: 5px auto;
overflow: hidden;
width: 1430px;/* 给包括ul的盒子设定宽度为访问器对话框的物理学宽度,发现li的內容依然垂直居中,表明不管是是不是定宽,相对性精准定位法都可以使float元素垂直居中 */
}
.demo ul {
float: left;
position: relative;
left: 50%;
}
.demo ul li {
border: 1px solid #555;
float: left;
position: relative;/* 只能用相对性不可以用肯定 */
padding: 5px;
left: ⑸0%;/* 或right: 50%; */
list-style: none;
margin: 10px;
}

这类方式适配IE6,实际操作的情况下能够考虑到用它。
因为标准不容许,Demo检测页没法做了=_,= ,期待对您有一定的协助。
上一篇:css全自动换行 避免撑破div危害排版 返回下一篇:没有了