zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    什么样的代码称得上是好代码?
    九年程序人生 总结分享
    Docker入门 第一课 --.Net Core 使用Docker全程记录
    阿里云 Windows Server 2012 r2 部署asp.net mvc网站 平坑之旅
    Visual studio 2015 Community 安装过程中遇到问题的终极解决
    Activiti6.0 spring5 工作流引擎 java SSM流程审批 项目框架
    java 进销存 库存管理 销售报表 商户管理 springmvc SSM crm 项目
    Leetcode名企之路
    24. 两两交换链表中的节点
    21. 合并两个有序链表
  • 原文地址:https://www.cnblogs.com/deng303359/p/2359835.html
Copyright © 2011-2022 走看看