未知宽度水平居中的几种方法

raledong 发布于2019-08-28 18:05 / 1196人阅读

摘要：在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。但即使我们没有设置的宽度直接设置的外边距就可以实现水平居中了这样我们就可以通过设置水平居中间接使里面的内容居中。转自未知宽度水平居中的几种方法

在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。当时在网上找了一些解决方法，并选了一个最合适的方法，现将当时整理的一些方法发出。下列以分页作为演示说明：

点击查看演示DEMO

方案一

利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动”

.unknow_width_center1 {position:relative; left:50%; float:left;}
.unknow_width_center1 li {position:relative;  right:50%; z-index:2; float:left}

通过给父元素设置浮动float,再设置父元素的position属性为relative和left:50%;子元素设置position:relative和left:-50%来实现水平居中。

可以保留块级元素仍然是以display:block的形式显示,不会添加无意义的标签,不添加嵌套深度。缺点是设置了position:relative;带来了一些副作用，并且需要闭合（清除）浮动。

方案二

利用text-align属性特性（text-align:center 对于ie6、7块级和内联级都可以水平居中。其它浏览器内联级(内联块级，文字)元素才可以水平居中，块级无效。）强制定义为内联 display:inline

.unknow_width_center2 {text-align:center; padding:5px;}
.unknow_width_center2 li {display:inline;}

将子元素设置为内联居中，那么大家都知道的display:inline内联元素宽高是不可以设定的，局限性太大，不宜使用。

方案三

利用table的属性特性

.unknow_width_center3{margin:0 auto}
.unknow_width_center3 ul {overflow:hidden; *zoom:1}
.unknow_width_center3 ul li {float:left;}

是使用table作为容器的方法来实现。添加了无意义的标签。Table标签本身并不是块级元素,当我们不设置table的宽度的话,他里面的宽度是由他内部元素的宽度撑起来的。但即使我们没有设置table的宽度,直接设置table的外边距margin:0 auto;就可以实现水平居中了!这样我们就可以通过设置table水平居中,间接使里面的内容居中。

方案四

利用内联块display:inline-block的text-align属性

.unknow_width_center4 {text-align:center}
.unknow_width_center4 ul li {display:inline-block; *display:inline; *zoom:1;}

IE6/7下直接设置display:inline-block的居中无效，这里在IE6/7下设置了display:inline，神奇的是竟然可以设置宽高及其垂直方向的内外边距。缺点是display:inline-block会引起一些间隙，当然有看起来碍眼解决方案。

方案五

利用table table-cell

.unknow_width_center5 ul{  display:table; margin:0 auto; }
.unknow_width_center5 li{display:table-cell;}

ie6/ie7不支持table-cell属性，所以该方法也不适用ie6/ie7,如果需要兼容在这基础上加东西也很蛋疼。

点击查看演示DEMO
个人偏向使用方法一”相对浮动”，适用广泛代码简洁且不会出现什么问题，可惜就是每次使用的时候要考虑浮动的处理。

转自：cocss » 未知宽度水平居中的几种方法

混合云专线服务 js缓存的几种方法最基本的几种 html的几种轮播 js的几种数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111009.html

未知宽度水平居中的几种方法

摘要：在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。但即使我们没有设置的宽度直接设置的外边距就可以实现水平居中了这样我们就可以通过设置水平居中间接使里面的内容居中。转自未知宽度水平居中的几种方法在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。当时在网上找了一些解决方法，并选了一个最合适的方法，现将...

shenhualong 2019-08-01 14:46 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Scholer 2019-08-02 16:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

mayaohua 2019-08-29 18:44 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
使一个div垂直+水平居中的几种方法

摘要：前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题思路绝对定位居中原始版这个是我回答出来的，也是被各位所熟知的一种方法，设外层相对定位，内前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这...

joyqi 2019-08-29 11:04 评论0 收藏0