加拿大卑诗快乐8:CSS样式 中的垂直居中法

加拿大快乐8走势图 www.sn89e.com.cn 2018-10-20 PM 05:10.来自互联网

(阅览)Read 1320

(调整字号)Size

16px 14px 12px

Vertical-Align

既然有水平居中属性text-align: center, 我们的第一反应、实现水平居中的方法应该是vertical-align: middle。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式.

But !!!

Vertical-align doesn’t apply to block-level elements like a paragraph inside a div.

如此可知:这个方式确实直观且有效,但其适用范围仅仅限于 table cell 中的内容。

这也是初学者会容易踩坑且十分困惑的一个问题。

CSS table 中 Vertical-Align 垂直居中示例:

<div class="parent"> <div class="child">Content herediv> div> 
.parent {display: table;}

.child {display: table-cell;vertical-align: middle;}


Line-Height

该方法适用于单行文本(或图片)的垂直居中,我们需要做的仅仅是将line-height属性设置的大于font-size,且等于容器的高度。

<div class="content"> Text here div> 
.content{height:200px; /*不必要*/ line-height: 200px;}

当然,我们也可以不设置父级元素的高度,而是让子元素将其撑开,同样能达到效果。
同理,图片和单行文本一样,也为inline元素,也可以通过设置容器的line-height达到居中效果:


="content"> <img src="image.png" alt="" /> div>
.content {line-height: 200px;}
#parent img {vertical-align: middle; /*调整基线位置,不是设定垂直居中哦~*/}

绝对定位 and 负 Margin
这里通过绝对定位将目标元素左上角定位在父级元素的中央位置,然后通过设定目标元素的margin属性使其中心点与父级元素重合,适用于所有block元素。
<div class="parent"> <div class="child">Content herediv> div> 
.parent {position: relative;height: 800px;}
.child {position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;margin: -15% 0 0 -25%; /*margin 为负值且为自身尺寸的一半*/}
然而,使用这种方法经?;岢鱿指讣度萜髦械哪谌菀绯?, 所以最好在知道父级元素的宽度和高度时使用该方法。

绝对定位 and Stretching
这里通过绝对定位并设置top, bottom, right, and left 为 0 ,将目标元素拉伸至父级元素的所有 4 个边。 再设置 margin 为 auto,使得 上下和左右 margin 相等。则实现完全的剧中效果。适用于所有block元素。
<div class="parent"> <div class="child">Content herediv> div> 
.parent {position: relative;height: 300px;}
.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 50%;height: 30%;margin: auto;}
这种方法,在IE 8 以下不 work ...

绝对定位 and transform3d
这里通过绝对定位将目标元素左上角定位在父级元素的中央位置,然后通过设定目标元素的transform3d属性使其中心点与父级元素重合,适用于所有block元素。
<div class="parent"> <div class="child">Content herediv> div>
	

.parent {position: relative;height: 300px;}

.child {position: absolute;top:50%;left:50%;width: 150px;height: 130px;transform:translate3d(-50%,-50%,0); /*向左向上移动自身尺寸的一半*/}

IE 8 以下不 work ...

css3 中的 Flex 布局
将父级容器设置为 Flex 容器,并规定子项目的排列方式。详细参见 Flex 布局教程
<div class="parent"> <div class="child">Content herediv> div> 
.parent {
display: flex;
display: -webkit-box;
display: -webkit-flex;

display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;

/* 子元素主轴(默认为水平轴)上居中*/
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-pack:center;/* IE 10 */
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;/* IE 11+,Firefox 22+,Chrome 29+,Opera 12.1*/

/* 子元素交叉轴(默认为纵轴)居中 */
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-align: center;/* IE 10 */

-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
height: 300px;
}
.child{width: 150px;height: 130px;}

支持 CSS3 的浏览器可用, 由于个浏览器厂商各异,导致各种前缀眼花缭乱。






0371/8622 0001

weekdays :   -am. 09:00-11:30
-pm.14:00-18:30 Open Hours

中国郑州 郑东新区金水东路与中兴路交汇处楷林IFC /A座 -17F-1713

Room1713 Building A,Kineer IFC,JinShui East Rd.
Zhengdong New Area,Henan,China

  • 90岁老夫妇也玩王者荣耀真人cosplay? 2019-02-15
  • 海军第二十八批护航编队结束对喀麦隆的友好访问驶离杜阿拉港 2019-02-14
  • 调查:“大数据杀熟”是否真的存在? 2019-02-14
  • 一图看懂丨拉林铁路藏木特大桥 2019-02-13
  • 端午将近 中纪委近期曝光的这些典型“四风”问题需警惕 2019-02-13
  • “陪堂妈妈”上课3000多节 班主任:她去中考没问题 2019-02-12
  • 【品牌资讯】环球网荣获“中国新闻网站十大影响力品牌奖” 2019-02-12
  • 百名红色通缉令三成多归案 海外追逃难在何处? 2019-02-11
  • 天津举办改善营商环境专题讲座 2019-02-11
  • 亳州留置“第一案”审理!谯城区一书记被指控 2019-02-10
  • 北京冬奥场馆建设注重赛后利用 2019-02-10
  • 乡亲们幸福,我也感到幸福 2019-02-09
  • 端午假期全国迎客8910万人次 传统文化活动受青睐 2019-02-09
  • Windows10新版17692发布-热门标签-华商网数码 2019-02-08
  • 这样的papi酱你见过吗?满满的正能量 2019-02-07
  • 52| 598| 433| 795| 330| 260| 216| 525| 185| 712|