vertical-align垂直居中
来源:互联网 发布:刘飞儿 送一血 知乎 编辑:程序博客网 时间:2024/05/21 17:18
本文转自:http://www.webhek.com/vertical-align/
各种技术论坛里经常会有这样的问题提出,“我如何能将这个东西竖向居中?”这个问题通常会跟随着这样一句话,“我使用了vertical-align:middle
,但是不管用! ”
这个问题其实有三个层面的原因
- HTML布局通常都不是专门针对竖向呈现而设计的。这很自然,一般文字占宽会自动扩展,内容的高度是依据内容的多少和有效宽度而定。很显然,横向宽度和横向布局很容易实现;竖向高度和布局被动跟随横向布局适应。
vertical-align:middle
没有按预期的设想起作用的原因通常是程序员没有理解其正确的用法,但…- … 这又是因为CSS规范(以我的观点)把它给弄拧巴了—依赖
vertical-align
使用的场合的不同,它实际上会表现出两种完全不同的用法。
Table单元格中的vertical-align
当出现在Table单元格中时,vertical-align
的效果会如大多数人的预期一样,它会跟(老的,不鼓励使用)的valign
属性的作用一样。在现代浏览器里,下面的这三种写法的效果是一样的:
<td valign="middle"> <!-- 这是一种会逐渐被淘汰的用法 --> </td><td style="vertical-align:middle"> ... </td><div style="display:table-cell; vertical-align:middle"> ... </div>
在浏览器中,它们的现实效果是下面这样:
<td>
使用valign="middle"
<td>
使用valign="bottom"
<td>
使用vertical-align:middle
<td>
使用vertical-align:bottom
<div>
使用display:table-cell; vertical-align:middle
<div>
使用display:table-cell; vertical-align:bottom
vertical-align在inline元素上效果
然而,当vertical-align
被应用的到inline元素上时,它的作用却是类似(老的,不鼓励使用)的valign
属性对<img>
的作用一样。在现代浏览器里,下面的这三种写法的效果是一样的:
<img align="middle" ...><img style="vertical-align:middle" ...><span style="display:inline-block; vertical-align:middle"> ... </span>
在浏览器中,它们的现实效果是下面这样:
在这个段落中,我放了两个图片— 和 —作为例子。
在这个段落中,我放了两个图片— 和 —作为例子。
在这个段落中,我用<span>
display:inline-block
vertical-align:middle 和 display:inline-block
vertical-align:text-bottom作为例子。
vertical-align在其它元素上的效果
技术上,某个CSS属性并不是在任何的HTML元素上都是生效。当一个新手将vertical-align
属性应用到一个block元素(例如标准的<div>
)上时,大多数浏览器会依照继承的原则,将所有它的inline子元素也应用这个属性。
那么,如何将一个元素竖向居中?
如果你在读这篇文章,你很可能对为什么你的写法不好用并不感兴趣。你感兴趣的很可能是如何能让它起作用。
方法一
下面的方法有两个(小)前提。如果你能做到这些前提,那么这个方法适用于你:
- 你需要把想要竖向居中的内容放到一个block元素中,并给这个想要居中的元素指定固定的高度。
- 绝对定位(absolutely-position)这个元素。(通常这样做是没问题的,因为你这个想要居中的元素的父元素仍然可以使用相对位置)。
如果你能接受上面的两个必要条件,那么,方法是这样的:
- 指定父元素为
position:relative
或position:absolute
。- 给子元素指定固定的高度。
- 给子元素设定
position:absolute
以及top:50%
,让子元素移动到父元素内部上下居中的位置。- 给子元素设定
margin-top:-yy
,这里的 yy 的值是你的子元素的高度的一半,弥补居中时的偏差。
下面是CSS代码:
<;style type="text/css">#myoutercontainer { position:relative }#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }</style>
下面是HTML代码:
<div id="myoutercontainer"><div id="myinnercontainer"><p>Hey look! I'm vertically centered!</p><p>How sweet is this?!</p></div></div>
在浏览器中,上面的代码会产生如下的效果:
海,看看!我竖向居中了!
好厉害,不是吗?!
方法二
这个方法需要你满足下面的前提条件:
- 需要竖向居中的内容只有一行文字。
- 需要对父元素设定固定的高度。
如果你能接受上面的条件,那么,方法是这样:
- 将父元素的
line-height
设置为你想要的高度。
下面是CSS代码的写法:
<;style type="text/css">#myoutercontainer2 { line-height:4em }</style>
下面是HTML代码的写法:
<p id="myoutercontainer2">嗨,我竖向居中了,耶!</p>
在浏览器中,上面的代码会产生如下的效果:
- vertical-align垂直居中
- vertical-align垂直居中
- vertical-align: middle垂直居中
- 关于垂直居中vertical-align
- vertical-align用法 垂直居中
- vertical-align垂直居中无效
- vertical-align属性与垂直居中
- 关于vertical-align实现图片垂直居中
- 实现垂直居中 和 vertical-align
- vertical-align: middle;垂直居中精髓
- 利用vertical-align:middle垂直居中
- CSS 水平居中text-align、垂直居中 vertical-align
- 利用vertical-align:middle实现垂直居中对齐
- 图片在DIV 垂直居中显示(vertical-align: middle;)
- CSS实现垂直居中,vertical-align:middle怎么用
- vertical-align使图片垂直居中的小细节
- 利用vertical-align居中
- 简单理解css中的垂直居中和水平居中,即vertical-align和text-align属性
- 有关问题小结(22)-代码实现logcat保存
- Linux 高性能服务器编程——多线程编程
- 关于Ext的Combo加载数据的问题。
- elcipse 编译cocos2d-x android
- ios5.1.1越狱实践
- vertical-align垂直居中
- 轻量级KVO ——》 KVO 管理 observeValueForKeyPath
- 构建一个跨机房的Hadoop集群,有非常多的技术难点(颠覆你以往的认知)
- 枚举
- 张孝祥老师交通灯管理系统的学习笔记 在做一件事时,首先要明确要达到什么效果。有目的性。就软件项目来说就是,首先要看的就是项目所提出的项目要求。做项目,不急于写代码,先把问题搞清楚,把要求分
- 在oracle下如何创建database link全面总结
- NSNotificationCenter+ UITapGestureRecognizer
- Struts2——史上最强MVC框架
- mysql 修改root密码