CSS水平居中的9种方法

html-css023

CSS水平居中的9种方法,第1张

容器的居中显示在网页设计中是很常见的,居中显示可以获得视觉的焦点,是内容更加突出,下面就简单的说明一下如何在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层随之浮动,代码示例如下

特别提示

每种方法都适应不同的运行环境,实际操作时需要考虑不同浏览器的解析时的兼容性

分类: 电脑/网络 >>百度 >>百度空间

问题描述:

试了很久,可是没有效果。

编码:

CURSOR: url('webme.bokee/inc/mouse035.cur')

scrollbar-arrow-color:whitescrollbar-track-color:#66CDAAscrollbar-face-color:#66CDAAscrollbar-highlight-color:whitescrollbar-3dlight-color:#66CDAAscrollbar-darkshadow-color:#66CDAAscrollbar-shadow-color:white}

a:hover{text-decoration:underlinecolor:#C0C0C0cursor:url('webme.bokee/inc/mouse035.cur')}

CSS9(部分):

BODY {background-image: url(2.babidou/pic/2006/3/9/emilyji/css/index_08.gif)}

#main {BACKGROUND: url(2.babidou/pic/2006/3/9/emilyji/css/index_661.gif) no-repeat 50% top}

#header {MARGIN-LEFT: 100pxHEIGHT: 270px}

#header DIV.tit A.titlink {FONT-SIZE: 14pxCOLOR: #61ab8aTEXT-DECORATION: none}

#header DIV.tit A.titlink:visited {FONT-SIZE: 14pxCOLOR: #61ab8aTEXT-DECORATION: none}

#header DIV.tit {FONT-SIZE: 12pxRIGHT: 120pxCOLOR: #61ab8aTOP: 230px}

#header DIV.desc {FONT-SIZE: 12pxRIGHT: 120pxCOLOR: #61ab8aFONT-FAMILY: TOP: 250px}

#tab {TOP: 250px}

#tab A.on {FONT-SIZE: 13pxCOLOR: #2d9465LINE-HEIGHT: 150%}

#tab A.on:link {FONT-SIZE: 13pxCOLOR: #2d9465LINE-HEIGHT: 150%}

#tab A.on:visited {FONT-SIZE: 13pxCOLOR: #2d9465LINE-HEIGHT: 150%}

#tab SPAN {DISPLAY: noneFONT-SIZE: 13pxCOLOR: #2d9465LINE-HEIGHT: 120%}

#tab A:link {FONT-SIZE: 13pxVERTICAL-ALIGN: topCOLOR: #2d9465LINE-HEIGHT: 150%TEXT-DECORATION: none}

#tab A:visited {FONT-SIZE: 13pxVERTICAL-ALIGN: topCOLOR: #2d9465LINE-HEIGHT: 150%TEXT-DECORATION: none}

#tab2 SPAN {FONT-WEIGHT: boldFONT-SIZE: 13pxCOLOR: #61ab8a}

#tab2 A {FONT-WEIGHT: boldFONT-SIZE: 12px}

#tab2 A:link {COLOR: #ffffff}

#tab2 A:visited {COLOR: #ffffff}

解析:

这是鼠标特效 标题 标题背景 导航 的代码~

这些代码可以放到最上面

你可以把原来的这些开头的代码给删了

然后把这些加进去

然后预览下

再保存~

这样就可以完美的解决我们提取css的需求。但是官方不建议我们这样做。他们认为CSS就该打包到JS中减少请求数,看需求吧。

然后在 修改最初的module模块下面的rule里面的css规则变成

上面将css分离出来了。但是图片路径可能不太对

这个不是我们想要的。所以我们要用到publicPath来解决。

在处理前我们在webpack.config.js上声明一个对象叫做 website

这里特别注意的就是 IP和端口 是你本机的IP和你配置的端口

然后在output选项中引用这个对象的publicPath属性