元素的水平居中的方法

元素内的行内元素

在元素上加

text-align:center;

宽度固定的块级元素

在元素上加

width: 宽度值;
margin-left: auto;
margin-right: auto;

或者用绝对定位

position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);

宽度不固定的块级元素

方法1

display:inline-block。通过以下几个步骤

  1. 元素设置text-align:center;
  2. 元素设置font-size:0;。这样做是为了去除子元素间的空格的占位
  3. 子元素设置display:inline-block;

方法2

需要通过以下几个步骤

  1. 让元素的宽度变为所包含元素的内容。可以用浮动或绝对定位。
  2. 元素向左移动其父级元素宽度的50%
  3. 子元素向左移动其父级元素宽度的50%

例如,有如下的HTML结构

<ul id="no-sure-width-2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

样式为

#no-sure-width-2 {
    list-style: none;
    position: absolute;
    left: 50%;
    /* 用下面的两个样式 和使用 position: absolute;是等效的。本质上都是让元素的宽度变为所包含元素的宽度 */
    /*float:left;
    position: relative;*/

}

#no-sure-width-2>li {
    float: left;
    position: relative;
    left: -50%;
    /*right: 50%;*/ /*left -50%和right 50% 是等价的*/
    /*将每个分页项向左移动父元素宽度的50%*/
    background-color: #ddd;
    color: #fff;
    width: 20px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

总结

上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+,Chrome,Firefox等。

还可以使用CSS3的flexbox,transform等方式来实现水平居中。但使用这些CSS3特性来做居中时,要注意下兼容性。

详细描述和更多实现见六种实现元素水平居中

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(二)获取和操作元素的属性

DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。

1364
来自专栏进击的君君的前端之路

CSS3文本

992
来自专栏Android小菜鸡

HTML JS DOM

  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

1792
来自专栏十月梦想

CSS边框

border-方向:width style color(border对应分别是宽度 样式 颜色中间空格隔开。)

953
来自专栏Android干货

自定义控件详解(五):onMeasure()、onLayout()

1522
来自专栏用户画像

导航页下拉菜单

1、static :默认值 没有定位 元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。

1162
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

元素vertical-align垂直对齐的位置与前后元素都没有关系 元素vertical-align垂直对齐的位置与行高line-height没有关系。 ver...

6202
来自专栏Java后端技术

CSS语法小记

    1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如...

721
来自专栏进击的君君的前端之路

CSS理解之margin

1552
来自专栏python3

tkinter -- button2

StringVar是Tk库内部定义的字符串变量类型,在这里用于管理部件上面的字符;不过一般用在按钮button上

942

扫码关注云+社区

领取腾讯云代金券