在做H5的过程中,经常会遇到文字或者图片的垂直居中问题,试了不同的办法,感觉这是一个困扰前端程序员的难题。网上也能找到许多文章,本文仅列出我所用到过的一些办法。
文字居中
使用line-height
line-height是最简单的让文字居中的办法了,即设置line-height和div高度一样。但这种使用有限制,高度只有使用绝对值,不能使用百分比之类的相对值。
HTML:
<div>this is vertical align text</div>
CSS:
div { height: 100px; line-height: 100px; }
如果是多行文字的话,可以这样:
HTML:
<div><span>vertically centered text</span></div>
CSS:
div
{ height: 200px; line-height: 200px; }
span
{ display: inline-block; vertical-align: middle; line-height: 14px; /* <-- adjust this */ }
表格法
可以借助于html的一些标签来实现垂直居中,例如表格就是可以参考的一种。
HTML:
<div class="ext-box" style="width:100%;height:100%">
<div class="in-box">
<span>确定</span>
</div>
</div>
CSS:
.ext-box { display: table; }
.in-box { display: table-cell; vertical-align: middle; text-align: center; }
在上面的写法中,外层div被设置成了表格显示,内层div被改成了表格的一个单元,利用单元格内垂直居中的属性,实现文字居中。
附上两篇stackoverflow上关于文字居中的帖子,比较有参考意义:
Is it possible to vertically align text within a div?
CSS Center text (Horizontal and Vertical) inside a DIV block
图片居中
之前尝试过使用表格法来设置图片居中,偶尔会出现一些无法严格居中的情形,也没搞清楚到底是为什么,只好尝试别的考虑。
inline-block helper
借助于inline-block相互对齐属性,可以实现图片的居中。
HTML:
<div class=frame>
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
CSS:
.frame { height: 25px; /* equals max image height */ width: 160px; border: 1px solid red; white-space: nowrap; text-align: center; margin: 1em 0; }
.helper { display: inline-block; height: 100%; vertical-align: middle; }
img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; }
在上面的代码中,首先设置helper占据frame高度。这个时候,另外一个inline-block标签span就可以中间对齐helper,从而实现图片的居中。当然,这里面的frame也必须是固定高度值。
图片居中,目前只尝试了一个使用办法。附上stackoverflow上的帖子,供大家参考。
How to vertically align an image inside div
可以看出,在对齐的各类办法中,一般都要求高度是固定的。在移动WEB开发中,宽度是固定手机屏大小,但高度一般是可以往下延伸的。不过,我的一般处理办法是尽量避免滚动屏幕,一屏看完所有信息是最好的,所以在设计的时候,布局尽量松散,就是说留有余地,在不同的屏幕上,不会因为这些固定高度的控件挤压布局而出现重叠的情况。
前端开发确实有太多的细节需要考虑,继续积累吧!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10770.html