CSS 图片在DIV中垂直居中的显示方法

本文详细介绍了CSS的vertical-align:middle属性的作用,包括如何使用此属性实现图片在DIV中的垂直居中对齐,并提供了实例代码演示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vertical-align:middle;的作用

这篇文章重点写下vertical-align:middle;的作用

1、使用margin属性进行水平对齐

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
</div>
<p><b>注释:</b>除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。</p>
</body>
</html>
2、vertical-align:middle;属性的使用:

先看一下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的中间位置,如下图:


如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:


如果我想要让class="img404"的img在class="wall"的div里面垂直居中,我可以在div里面加一个span空标签,把它的高度设为100%,再给它一个vertical-align:middle样式,同样地给img一个vertical-align:middle样式,那么img就可以在div里面垂直居中了。如图:

接下来是我的demo:

使logo垂直居中显示:

html文件如下所示:

<!DOCTYPE html>
<html>
<head>
	<title>用户登录</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="Keywords" content="界面设计">
	<link rel="stylesheet" href="C:\Users\Administrator\Desktop\ui\ui.css">
</head>
<body>
	<!-- 空一点 -->
	<div id="ajax-hook">
	</div>
	<!-- 整体页面div -->
	<div class="login_wrap c1">
		<!-- 两大部分:1--头部,2--整体 -->
		<!-- 头部div -->
		<div class="login_title">
			<div class="log-hd">
				<div class="wpl">
					<div class="log-logo">
						<span></span><img class="logo-img" src="C:\Users\Administrator\Desktop\ui\log-logo.png" > 
					</div>
				</div>
			</div>
		</div>
		<!-- 整体div -->
		<div class="login_middle">
	   

		</div>
	</div>
	<!-- 底部div -->
	<div class="login_footer">

	</div>
</body>
</html>
css样式如下:

html,body {
background-color: #eff3f5;
}
div {
    display: block;
}

#ajax-hook {
position: fixed;
top: 0;
z-index: 99999;
width: 100%;
}
.login_wrap{
	background-color: #1F72B4;
	height:650px;
	width:1423px;
}
.login_title{
	background-color: #53B232;
	height:120px;
	width:1423px;
}            
.cl {
zoom: 1;
}
.login_middle {             
position: relative;
padding: 25px 0 0 0;
z-index: 5;
}
.login_footer{
	background-color: #DD4F43;
	height:120px;
	width:1423px;
}
.log-hd {
    border:1px solid red;
    height: 120px;
    position: relative;
    background-color: #EFF3F5;
}
.wpl {
    border:1px solid red;
    width: 100%;
}
.log-logo{
	width:50%;
	height: 120px;
	margin:0 auto;
	border:1px solid red;
}
.logo-img{
	border:1px solid red;
	vertical-align:middle;
}
span{
	height:100%;
	display:inline-block;
	vertical-align:middle;
}
效果图如下:



这只是我练习时候的一点点小心得,后续知识继续补充。吐舌头吐舌头吐舌头




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值