具备Float特性的元素仍然垂直居中

日期:2020-08-25 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

第1种方式,必须对包括li的ul提升1些款式(必须1些Hack),而且另外对外层的div设定text-align:center特性。

以上两项务必另外设定,不然不起功效,此时便可以做到大家的目地了。

第2种方式,对ul和li均设定position: relative的特性也可行。

在各访问器中检测,均一切正常显示信息。

重要款式


拷贝编码
编码以下:
display:inline-block; *display:inline; zoom:1;

检测编码

拷贝编码
编码以下:

<div style="width: 300px; height: 28px; line-height: 28px; border: 1px solid #ccc; font-size: 12px; text-align: center;">
<ul style="list-style: none; margin: 0; padding: 0; float: left; position: relative; left: 50%;">
<li style="float: left; position: relative; right: 50%;">1.万年水灾</li>
<li style="float: left; position: relative; right: 50%; margin: 0 20px 0 20px;">2.千年水灾</li>
<li style="float: left; position: relative; right: 50%;">3.百年水灾</li>
</ul>
<div style="clear: both;"></div>
</div>


拷贝编码
编码以下:

<div style="width: 300px; height: 28px; line-height: 28px; border: 1px solid #ccc; font-size: 12px; text-align: center;">
<ul style="list-style: none; margin: 0; padding: 0; display: inline-block; *display: inline; zoom: 1;">
<li style="float: left;">1.万年水灾</li>
<li style="float: left; margin: 0 20px 0 20px;">2.千年水灾</li>
<li style="float: left;">3.百年水灾</li>
</ul>
<div style="clear: both;"></div>
</div>