位置：广州松河 > 技术支持 > float:left与position:relative，left:50%+left:-50%组合居中方法_CSS学习

float:left与position:relative，left:50%+left:-50%组合居中方法_CSS学习

来源：网络整理时间：2023/3/4 0:56:38 共 3650 浏览

其它居中方法：

1、text-align:center与display:inline组合块居中，多个行内元素/块状元素居中方法

2、text-align:center与margin:0 auto居中区别

3、CSS：左右横向居中—position:relative;left:50%;方法（与本人方法接近，都使用了position:relative）

4、div垂直居中 css div盒子上下垂直居中（上下、左右都居中）

5、CSS 元素垂直居中的 6种方法

6、垂直居中（上下左右都居中）任何元素CSS代码

7、大图(宽图)在任意宽度浏览器内显示原尺寸、并居中、无导航条CSS

8、【图片居中】图片在固定框架内上下左右水平全部居中

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<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>
</head>
<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>
</html>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码_js/jQuery | ·下一条：text-align:center与display:inline组合块居中，多个行内元素/块状元素居中方法_CSS学习