容器的居中显示在网页设计中是很常见的,居中显示可以获得视觉的焦点,是内容更加突出,下面就简单的说明一下如何在HTML中通过样式的控制来实现
01最常见的一种,代码示例如下图,首先,取big一半像素大小赋给small层,通过margin: 0 autotext-align: center来实现
02第二种方法,代码示例如下图,将big层的display设置为table-cell,然后small层的margin-left取(500-250)/2,也就是125即可
03第三种方法,代码示例如下图,将big层的position设置为absolute,然后small层的margin-left取(500-250)/2,也就是125即可
04第四种方法,通过display:flex实现,代码示例如下图,big层display:flexflex-direction:column而small层align-self:center
05第五种方法,在small层的宽度没有的时候,可以通过width:fit-content这个设置来完成,代码示例如下
06第六种方法,通过display:inline-block来实现,将这个设置赋给big层即可,代码示例如下图
07第七种方法,设置big层position:relative,相对情况下,使small层左浮动,代码示例如下
08第八种方法,transform属性,代码示例如下
09第九种方法,借助第三方样式,比如增加一个add节点,水平浮动向左,使small层随之浮动,代码示例如下
特别提示每种方法都适应不同的运行环境,实际操作时需要考虑不同浏览器的解析时的兼容性
此时你只要给浮动的对象,加上相对应的宽度,让其上下外边距为0 左右外边距为自动,就可以实现居中!
html中的CSS样式修改为:
#globallink ul {list-style: none
padding: 0px
overflow: hidden
width: 700px
margin: 0 auto
}
即可:
如图
其中修改的属性介绍:
1、margin:简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
当设置上下边距之后,在设置左右我自动(auto)即可实现自动居中!(前提是要给对象元素设置觉得的宽度!)
前言:根据最近学习的课程,简单总结一下学习到的css左右布局以及居中方案。后期学习深入之后再回来进行css居中的完整总结。给所有子元素添加 float: left ,给父元素加 clearfix 类,清除浮动
html:
css:
将内联元素外部的块级元素的 text-align 设置为 center ,即可实现内联元素( inline 、 inline-block )的水平居中。
演示
将固定宽度的块级元素的 margin-left 和 margin-right 设置为 auto ,即可实现块级元素的水平居中。
演示
将每个块级元素的 display 设置为 inline-block ,然后将它们的父容器的 text-align 设置为 center ,即可使多个块级元素水平居中。
演示
设置内联元素的行高( line-heigt )和内联元素的父元素的高度( height )相等,且内联元素的字体大小远小于行高,即可使内联元素垂直居中。
演示
通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,即可实现垂直居中。
演示
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中
演示