- 以前一直设置水平居中，现在我们来讨论一下图片居中的四种小技巧：
首先原码是这样的1 <style type="text/css"> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 .box { 7 width: 200px; 8 height: 200px; 9 /* 设置盒子在浏览器中水平居中 */ 10 margin: 50px auto; 11 border: 1px solid #000; 12 } 13 .box .pic { 14 /* 图片目前在盒子的左上角 */ 15 width: 50px; 16 height: 50px; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="box"> 22 <img class="pic" src="images/slide_01_640x340.jpg" alt=""> 23 </div> 24 </body> 25 </html>
在浏览器中是这样显示的：
下面有四种方式使图片垂直居中
方式一：text-align： center；line-height = height; vertical-align: middle (vertical-align只能作用与行内块及表格标签)。设置完这三个属性后，图片即可垂直居中啦，让我们来看一下效果吧！1 .box { 2 width: 200px; 3 height: 200px; 4 /* 设置盒子在浏览器中水平居中 */ 5 margin: 50px auto; 6 border: 1px solid #000; 7 /* 新加的属性 */ 8 text-align: center; 9 line-height: 200px; 10 vertical-align: middle; 11 }
浏览器中的图片已经居中啦！
但是这种方式不灵活，如果要改动变量的话就会给后面工作增加负担
方式二：给父盒子中添加一个参照标签 比如<span></span>,代码如下：1 .box { 2 200px; 3 height: 200px; 4 /* 设置盒子在浏览器中水平居中 */ 5 margin: 50px auto; 6 border: 1px solid #000; 7 text-align: center; 8 } 9 .box .pic { 10 /* 图片目前在盒子的左上角 */ 11 50px; 12 height: 50px; 13 } 14 .box span { 15 height: 100%; 16 0; 17 display: inline-block; 18 vertical-align: middle; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="box"> 24 <span></span> 25 <img class="pic" src="images/slide_01_640x340.jpg" alt=""> 26 </div> 27 </body>
方式三：给父元素加伪元素：：before或：：after 原理同方式二 看代码：
1 <style type="text/css"> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 .box { 7 width: 200px; 8 height: 200px; 9 /* 设置盒子在浏览器中水平居中 */ 10 margin: 50px auto; 11 border: 1px solid #000; 12 text-align: center; 13 } 14 .box .pic { 15 /* 图片目前在盒子的左上角 */ 16 width: 50px; 17 height: 50px; 18 } 19 .box:before { 20 content: ""; 21 height: 100%; 22 width: 0; 23 display: inline-block; 24 vertical-align: middle; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="box"> 30 <img class="pic" src="images/slide_01_640x340.jpg" alt=""> 31 </div> 32 </body> 33 </html>
方式四： 最牛掰的一种，最棒的一种：设置父盒子的显示模式为display： table-cell；和vertical-align：middle；就可以解决了，有没有很神奇？
1 <style type="text/css"> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 .box { 7 width: 200px; 8 height: 200px; 9 /* 设置盒子在浏览器中水平居中 */ 10 margin: 50px auto; 11 border: 1px solid #000; 12 text-align: center; 13 display: table-cell; 14 vertical-align: middle; 15 } 16 .box .pic { 17 /* 图片目前在盒子的左上角 */ 18 width: 50px; 19 height: 50px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="box"> 25 <img class="pic" src="images/slide_01_640x340.jpg" alt=""> 26 </div> 27 </body> 28 </html>
看到这里，小伙伴们还不动手试一试吗？