关于text |
您所在的位置:网站首页 › span设置居中不生效 › 关于text |
昨天项目,一直出现一个无法居中的问题,最后发现竟然是text-align的问题,才发现自己对text-align的理解还是不够透彻,于是在此再举例分析下。 css中的元素一共有三类:块元素、行内块和内联元素。 三者的区别就是: 块元素可以设置宽高,会独占一行; 行内块拥有块元素的所有特性,除了无法独占一行; 内联元素无法设置宽高,不会独占一行。 而text-align的作用就是:可以为文字和内联元素、行内块设置水平居中,即使该文字是在块元素内。 以下是例子: 以下是html代码: 这是span内联元素中的文字 这是块元素div中的文字 我是行内块元素,是有文字的span 我也是行内块元素,是div以下css代码: .wrapper { width: 500px; border: 1px solid black; margin: 0 auto; text-align: center; } .span { display: block; width: 50px; height: 50px; background: #bac; } .div { width: 50px; height: 50px; background: hotpink; } .span2 { display: inline-block; width: 150px; height: 50px; background: #bac; } .div2 { display: inline-block; width: 150px; height: 50px; background: hotpink; }以下是显示的示例: 所以,当使用text-align时,一定要注意,只能对文字(包括块元素中的文字)、内联元素和行内块进行水平居中,对块是没有用的。 注: 若对脱离文档流(比如position:absolute)的块元素水平居中,可对要求水平居中的块元素使用: left: 50%; transform: translateX(-50%);(有浏览器兼容性,需全部写上) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |