css垂直居中--img p

水深无声 2022-07-16 00:13 202阅读 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>