利用vertical-align:middle实现垂直居中对齐

最新推荐文章于 2023-11-05 23:47:24 发布

jj.ding

最新推荐文章于 2023-11-05 23:47:24 发布

阅读量2.2k

点赞数

分类专栏：前端-转载文章标签： html w3c css vertical-align 垂直居中

前端-转载专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文字转载自博客园：学明 http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html

最终实现效果为实现行内元素的水平、垂直居中对齐，效果图如下：

接下来为实现代码：

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title> 利用vertical-align实现图片垂直居中对齐 </title>
    <style>
	  #content {
		position:absolute;
		top:0;right:0;bottom:0;left:0;
		margin:auto;
		width:500px;
		height:500px;
		background-color:yellow;
		text-align:center;
	  }
	  .vertical-align-span {
		display:inline-block;
		width:1px;
		height:100%;
		margin-left:-10px;
		vertical-align:middle;
	  }
	  #content img{
		vertical-align:middle;
	  }
    </style>
 </head>
 <body>
	<div id="content">
		<span class="vertical-align-span"></span>
		<img src="5.jpg">
	</div>
 </body>
</html>

理论基础：

看一下W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。（必须承认这句话我看了很久页没看懂，后来在博客园看了学明兄弟的文章才明白了大概）；

学明兄弟认为它有两种用法：

第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。

第二种用法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：