咳咳,下面是正式内容,以我们最常见的网页为例
上图网页中,红框部分内的左右元素都是水平居中显示的,其中既有大小不一的文本又有图片,面对这种情况只要我们解决其中一个,另外三个就很简单了,那么这一个我们应该怎么处理呢
水平居中方法:
对于元素水平居中常用我们有二种办法:
方法一:text-align:center
文本在容器里水平居中,让inline
与inline-block
在容器里水平居中,text-align
添加给父元素。
方法二:margin: 0 aut0;
让一个有宽度的块元素在容器(父元素)里水平居中,margin: 0 auto
添加给当前元素。
(除此之外如果知道详细的布局数据。也可以根据情况手动设置margin
或padding
等元素调整,不过不建议使用,有毒副作用)
图片:
首先是图片,在选择方法之前,我们应该知道图片的类型是inline-block
类型,在选用方法时对于经常使用方法二的人就需要注意,margin: 0 auto;
的适用对象是有宽度的块元素,图片本身自然有宽度,但并不是块元素,需要先将其通过display: block;
将图片转化为块元素才能使用方法二。
相比而下,方法一就很简单了,无需转化元素类型,直接在父元素内使用该属性即可。
文本:
其次是文本,文本的嵌套既有使用inline
类型父元素嵌套的,又有使用block
类型嵌套的。针对不同的情况,我们选用的方法也不同。
- 嵌套
inline
类型的父元素,若想水平居中则在父元素下添加text_align:center;
- 嵌套
block
类型的父元素,若想水平居中则在本身元素下添加margin: 0 auto;
垂直居中方法:
方法一:line-height:
行高高度等于容器高度,只能实现单行文本在容器里垂直居中,line-height
添加给容器。
方法二:vertical-align: middle;
使一个inline-block
类型的元素垂直居中。
**方法三:**通过定位,为需要垂直居中的元素设置absolute
类型的定位,然后给父元素设置relative
类型的定位,然后
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
或者:
top:50%;
left:50%;
margin:-NNpx 0 0 -NNpx;
/*NN为元素宽高的一半**/
即可。
方法二有毒,需要4个条件!!!
写在最后
在结束之际,我想重申的是,学习并非如攀登险峻高峰,而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后,持之以恒的学习变得愈发不易,如同在茫茫大海中独自划舟,稍有松懈便可能被巨浪吞噬。然而,对于我们程序员而言,学习是生存之本,是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习,我们便如同逆水行舟,不进则退,终将被时代的洪流所淘汰。因此,不断汲取新知识,不仅是对自己的提升,更是对自己的一份珍贵投资。让我们不断磨砺自己,与时代共同进步,书写属于我们的辉煌篇章。
需要完整版PDF学习资源私我
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!