大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
容器的居中显示在网页设计中是很常见的,居中显示可以获得视觉的焦点,是内容更加突出,下面就简单的说明一下如何在HTML中通过样式的控制来实现
10余年的辽阳网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整辽阳建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“辽阳网站设计”,“辽阳网站推广”以来,每个客户项目都认真落实执行。
01
最常见的一种,代码示例如下图,首先,取big一半像素大小赋给small层,通过margin: 0 auto; text-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:flex;flex-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层随之浮动,代码示例如下
特别提示
每种方法都适应不同的运行环境,实际操作时需要考虑不同浏览器的解析时的兼容性
前言:根据最近学习的课程,简单总结一下学习到的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%的方法实现垂直居中
演示
1.横向居中
(1)方法一
position: fixed;
/* 居中对齐begin */
left: 50%;
/* 兼容老版本的方法 */
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
(2)方法二
设置固定宽度,并且设置margin:auto
(3)方法三
position: fixed;
left: 50% - 居中盒子宽度的50%;
2.纵向居中
(1) 高度和行高设置一样
height: 100px;
line-height:100px;
3.横向和纵向都居中
display: flex;
/* 默认的主轴是x轴row, justify-content: center 沿着主轴居中对齐 */
justify-content: center;
/* 我们需要一个侧轴居中 */
align-items: center;