css的居中布局问题

leoperfect 发布于2019-08-30 15:53 / 1590人阅读

摘要：在和下不支持属性，设置方法无法解决浏览器兼容问题。对于不支持的和使用特定的。利用技术区别对待和，在不支持的下，通过给父子两层元素分别设置和来实现居中。

css经常用来处理居中问题，不同的情况使用不同的方法；

一 :水平居中

(1)文本、图片等行内元素的水平居中

给父元素设置text-align:center,可以实现文本、图片等行内元素的水平居中



    hello world!

父元素高度不确定的文本、图片、块级元素的垂直居中通过给父容器设置相同的上下内边距来实现。

2 父元素高度确定的单行文本的垂直居中


hello world

父元素高度确定的单行文本的垂直居中，通过给父元素设置line-height来实现的，line-height的值和父元素的高度值相同

3 父元素高度确定的多行文本、图片、块级元素的垂直居中

方法一

利用css的一个垂直居中属性vertical-align，但是只有当父元素为td或th时，这个vertical-align才会生效，对于其他的块级元素（div、p）默认情况下是不支持该属性。在Firefox和IE8下，可以设置块级元素的display:table-cell属性，激活vertical-align。在IE6和IE7下不支持table-cell属性，设置table-cell方法无法解决浏览器兼容问题。总之，直接使用表格减少些操作。缺点是增加了嵌套深度和语义标签。



    
        hello

        hello

        hello

        hello

方法二

对于支持display:table-cell的IE8和Firefox用display:table-cell和vertical-align：middle。对于不支持的IE6和IE7使用特定的hack。利用hack技术区别对待Firefox、IE8、IE7和IE6，在不支持display:table-cell的IE6、IE7下，通过给父子两层元素分别设置top:50%和top:-50%来实现居中。



    
        
            
            hello world!

            hello world!

            hello world!

内容选自《编写高质量代码-web前端开发修炼之道》

超融合服务器服务器托管布局遇到的问题布局居中水平居中布局 html居中css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116564.html

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

lijinke666 2019-08-29 11:22 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

hedge_hog 2019-08-20 11:16 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

kun_jian 2019-08-01 15:45 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0