css垂直居中--img p

最新推荐文章于 2024-08-15 17:17:24 发布

沈志勇说

最新推荐文章于 2024-08-15 17:17:24 发布

阅读量2k

点赞数 1

分类专栏： css 文章标签： css 垂直居中

本文链接：https://blog.csdn.net/u011456552/article/details/52650088

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

因为p标签和img居中的方法我知道的不多就放到一起了！

1.单行文字的居中很简单一个text-align:center; line-hegight: 父级div的高度。就OK!

2.关键是多行！当然如果父级高度不定，我们可以文字的标签加个padding 也可以解决，但这不是一个好的方案。

下面父级div固定高度居中的写法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.container{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			text-align: center;
			display: table-cell;
			vertical-align: middle;
		}
		span{
			display: inline-block;
			width: 200px;
		}
	</style>
</head>
<body>
	<div class="container">
		<span>我是多行文字，我是多行文字，我是多行文字，我是多行文字我会居中！</span>
	</div>
</body>
</html>

3.原理很简单，就是利用table-cell下面的 vertical-align。

以上是文字居中的方法。

-------------------------------------------------------------------------图片居中--------------------------------------------------------------------------------------

1.与文字居中一样。同样使用的是vertical-align.代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.container{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			text-align: center;
			display: table-cell;
			vertical-align: middle;
		}
		img{
			display: inline-block;
			width: 200px;
		}
	</style>
</head>
<body>
	<div class="container">
		<img src="1.jpg" alt="">
	</div>
</body>
</html>

2.将最外层div设置成table 包裹img的div改成table-cell;全部加上 vertical-align:middle；即可！代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片居中</title>
	<style>
		.box{
			display: table;
			float: left;
			margin: 0 10px;
			width: 180px;
			height: 180px;
			border: 1px solid #333;
			text-align: center;
			vertical-align: middle;
		}
		.innerBox{
			display: table-cell;
			vertical-align: middle;
		}
		img{
			width: 90%;
                        vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="innerBox">
			<img src="2.jpg" alt="">
		</div>
	</div>
</body>
</html>

3.用背景图片做！利用background-position中有个center属性。可以完美实现居中。当然，别忘了background-repeat: no-repeat;

background-image: url();路径要写在行间

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片居中</title>
	<style>
		.box{
			display: table;
			float: left;
			margin: 0 10px;
			width: 200px;
			height: 200px;
			border: 1px solid #333;
			background-repeat: no-repeat;
			background-position: center;
		}
		
	</style>
</head>
<body>
	<div class="box" style="background-image: url(1.jpg);">
	</div>
</body>
</html>