关于布局中垂直居中,踩过的坑(解决了,但是还是稀里糊涂的)
昨天拿了一个页面练手,刚写了三行,碰见一垂直居中问题。没有问题的代码截图如下:
html:
css:
html,body,div,ul,li,span,img,input{ padding: 0; margin: 0; font-size: 72px; box-sizing:border-box; } div{ display: inline-block; } #wrapper{ position: absolute; top: 0.455rem; } header{ position: fixed; width: 100%; height: 1.222rem; line-height: 1.222rem; background-color: #F9F9F9; font-size: 0; } header input{ margin-left: .416rem; height: 0.722rem; width: calc(100% - 1.722rem); /* margin-right: .2rem; */ border-radius: .361rem; vertical-align: middle; font-size: 0.361rem; text-indent: 1rem; color: #333333; background-color: #ececec; } input::-webkit-input-placeholder{ color:red; } input:-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; } input::-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color:red; } input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:red; } #search{ position: absolute; /* float: left; */ left: .5rem; z-index: 99; } #search img{ width: 0.611rem; height: 0.611rem; border-radius: .361rem; z-index: 99; vertical-align: middle; } #clock{ width: .611rem; position: relative; left: .278rem; font-size: 0; } #clock img{ vertical-align: middle; width: 100%; height: 100%; }1.我在页面之初,为了布局方便,打算采用rem的形式,所以预先设置了
html,body,div,ul,li,span,img,input等元素的font-size:72px
2.在进行布局时,我没有给header设置任何的font-size ,也没有给直接给包裹着imgde DIV(id为clock)置任何的font-size,input 设置垂直居中,时钟的IMG设置垂直居中,就出现了下面的现象(为了更好说明问题,我将header背景做一下重新设置);
3.在给header 添加完font-size:0 ,情况貌似更糟糕了
4.但是当我给div(id为clock)添加上font-size之后,神奇般的正常了
查了资料,
说是垂直居中的基线问题,原本元素对齐的基线是baseline 。设置完font-size 后,会将inline-block元素的默认基线设置为文字的base-line。
资料来源:https://www.cnblogs.com/charling/archive/2013/10/15/3371060.html