水平居中总结-不定宽块状元素方法（三）

最新推荐文章于 2021-06-25 15:15:04 发布

技术与健康

最新推荐文章于 2021-06-25 15:15:04 发布

阅读量1k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

代码如下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

技术与健康

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水平居中总结-不定宽块状元素方法（三）

方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。代码如下： 1 2 3 css代码：.container{ float:left
复制链接

扫一扫