CSS aligns the picture horizontally vertically

1. Using Display:table-cell, the specific code is as follows:

The HTML code is as follows:

1 <  class= "Img_wrap">2<src= " Wgs.jpg ">3</div> 　　

The CSS code is as follows:

1 . Img_wrap {2    width: 400px;  3    height: 300px;  4    border: 1px dashed #ccc;  5    display: Table-cell;//main Is this attribute 6    vertical-align: Middle; 7     text-align: Center; 8 }

The effect is as follows:

2. Using the background method:

The HTML code is as follows:

1 <  class= "Img_wrap"></div>

The CSS code is as follows:

. Img_wrap {    width: 400px;     height: 300px;     Border: 1px dashed #ccc;     background: url (wgs.jpg) no-repeat Center center;}

Effects such as:

3. Use a P tag outside the picture to center the picture vertically by setting Line-height:

The HTML code is as follows:

1 class="img_wrap">2     <p><img src=" wgs.jpg " ></p> 3 </div>

The CSS code is as follows:

1 *{margin:0px;padding:0px}2 . Img_wrap{3 width:400px;4 Height:300px;5 Border:1px dashed #ccc;6 text-align:Center;}7 . Img_wrap P{8 width:400px;9 Height:300px;Ten Line-height:300px;/*row higher than height*/ One} A . Img_wrap p img{ - *margin-top:expression ((400-this.height)/2);/*CSS expressions are used to be compatible with IE6/IE7*/ - vertical-align:Middle; the Border:1px solid #ccc; -}

As follows:

CSS aligns the picture horizontally vertically