html中的垂直居中实现[通俗易懂]

html中的垂直居中实现[通俗易懂]在做H5的过程中,经常会遇到文字或者图片的垂直居中问题,试了不同的办法,感觉这是一个困扰前端程序员的难题。网上也能找到许多文章,配方将我所用过的办法总结如下:文字居中使用line-height

在做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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注