CSS学习小札-居中问题及解决方案

根据CSS中块级元素和行内元素的不同特征,其居中显示的方式也有差异,下面就水平和竖直居中的情况做一总结: 1.水平居中 1.1 给父元素设置text-aglin:center;可以实现文本、图片等行内元素的水平居中。 1.2 宽度确定的块级元素的水平居中是通过设置margin-left和margin-right的值为auto来实现。 1.3 对于宽度值不确定的块级元素的居中可以使用以下三种方式,可根据实际情况选择不同方案: 1.3.1 改变块级元素的display值为inline,然后使用text-aglin:center来实现居中, 但此做法的缺点是将块级元素转化为行内元素后就无法设置长宽,当然还有行内元素的其他局限性。 1.3.2 利用table。table本身不是块级元素(display的常用值包含block,compact,inline,table,none,marker). 其宽度靠其单元格中的内部元素的宽度“撑起”,即使不设置宽度也可以利用margin-left/right:auto来实现居中。 当然,使用table标签将会明显增加代码中的无语义标签。 1.3.3 通过给父级元素设置float和position:relative以及left:-50%,给子元素设置position:relative和left:-50%, 也可以实现水平居中,但是relative的位置属性不好控制。 2.竖直居中 2.1 父元素高度不确定的文本、图片、块级元素的竖直居中是通过设置父元素相同的上下边距实现的。 2.2 父元素高度确定的单行文本的竖直居中是给父元素设置line-height:(父元素的height值)来实现。 2.3 父元素高度确定的多行文本、图片、块级元素的竖直居中,分三种情况处理: 2.3.1 父元素为td和th时,可用vertical-align 2.3.2 对于不是此类型的父元素在Firefox和IE8下可用display:table-cell来激活成td或th类型 2.3.3 如果以上两种情况都不满足,则需要给元素添加表格标签,so sad~~~ 参考文献:《编写高质量代码:Web前端开发修炼之道》曹刘阳著-北京:机械工业出版社,2010.6-978-7-111-30595-8/CNY49.00

posted @   希-若愚  阅读(251)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示