Home > Developer > Web Develop
How CSS implements vertically centered images:
Recommended : As much as possible handwriting code, can effectively improve the learning efficiency and depth.
There are many times when you need to center the image vertically, but there is no immediate property to do this. Of course, the way to achieve the vertical center of the image is multiple, the following is a brief introduction of two of them.
Method One:
Use the margin method to center the picture vertically in the div. The Margin-top value is calculated as: div height/2-picture height/2.
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">Div{Height:400px;width:400px;Border:1px solid Red;}div img{Margin-top:127px;}</style></Head><Body><Div><imgsrc= "Mytest/demo/border.jpg"alt= "Ant Tribe"></Div></Body></HTML>
Way two:
The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">Div{Height:400px;width:400px;Border:1px solid Red;vertical-align:Middle;Display:Table-cell;}</style></Head><Body><Div><imgsrc= "Mytest/demo/border.jpg"alt= "Ant Tribe" /></Div></Body></HTML>
The above code allows the image to be vertically centered, but the IE7 browser does not support this approach.
The implementation method adds the following code to the DIV:
vertical-align:middle;display:table-cell;line-height:400px;
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4614
For more information, refer to: http://www.softwhy.com/divcss/
How CSS implements vertically centered images up and down
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
