根据精准定位来完成不确定宽度垂直居中显示信

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

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

在制做中內容垂直居中一般方式是给器皿width固定不动宽度,随后text-align:center;margin:0 auto;或将块装换为内联元素display:inline,随后text-align:center就可以完成垂直居中实际效果了。

下面这个方式是根据精准定位来完成的实际效果:

CSS编码:

拷贝编码
编码以下:

<style>
*{ padding:0; margin:0; list-style:none;}
.sjbest ul { float:left; position:relative; left:50%;}
.sjbest ul li { float:left;position:relative; right:50%; padding:6px; }
</style>

HTML编码:

拷贝编码
编码以下:

<div class="sjbest">
<ul>
<li><a href="#">归类1</a></li>
<li><a href="#">归类2</a></li>
<li><a href="#">归类3-设计方案邦</a></li>
</ul>
</div>

最先,ul设定左波动是以便 使得ul的宽度并不是100%,而是 几个li宽度的总和。 以后ul相对性精准定位 应用left把ul挪动到剧中部位。

这个应用 li的起止部位在垂直居中的50%的地区,因此必须把li 向左侧挪动50%。 这里想难题的情况下要留意,position:relative所界定的挪动百分比并不是相对本身的,而是相对父元素的。也便是说 li 50% 具体上测算出来的宽度 是 ul宽度的1半,而并不是li的。
上一篇:遵义千秋环境保护 返回下一篇:没有了