First, let's look at the following HTML:
| The code is as follows: | Copy code |
<Ul> |
|
Similar to this structure, we often encounter in practical applications. Among them, the width and height of li are fixed, but the width and height of the image may be uncertain, such as the commodity list of the mall.
If you want to center the image horizontally, you only need to apply text-align: center; to li, but it is not easy to center the image vertically.
There are many ways to vertically center unfixed height elements on the Internet, such as the background method and the label adding method. However, I do not want these methods to destroy the HTML structure, finally, we adopted the Taobao method.
| The code is as follows: | Copy code |
Li { Key code: Li { |
|
I am not very willing to use hack, but there is no way to use it. It is much better to use hack than to add additional elements to HTML, so I personally think this is the best solution I know.
Note that the font-size value is calculated by dividing li's height by 1.14. The reason is that Taobao engineers do not know why.
In addition, if the image height is fixed, you can use absolute positioning plus the negative margin.
Supplement:
| The code is as follows: | Copy code |
CSS * {margin: 0; padding: 0; list-style: none;} # vertical_box {width: 100%; display: table; border: 1px red solid; height: 400px; /* hack */* position: relative;} # vertical_box_sub {display: table-cell; vertical-align: middle;/* hack */* position: absolute; * top: 50%;} # vertical_box_container {font-family: ""; border: 1px green solid;/* hack for IE */* position: relative; * top:-50%; margin: 0 auto; width: 200px ;} HTML |
|
We can see that text-align: center is effective only for img (inline-block by default) and margin: auto is effective only for div (default block, so this time we try to set img to block, set div to inline-block, and then test it.
The code is as follows:
| The code is as follows: | Copy code |
| <! DOCTYPE> <Html> <Head> <Title> center Test </title> <Style type = "text/css"> . Container {width: 200px; height: 120px; border: 1px solid Green ;} . Box {width: 120px; height: 90px; border: 1px solid Green; display: inline-block ;} . H-align-div {text-align: center ;} . H-align-img {margin: auto; display: block ;} </Style> </Head> <Body> <Div class = "container h-align-div"> <Div class = "box"> </div> </Div> <Div class = "container"> </Div> </Body> </Html> |
|
The compatibility is as follows:
Div: IE7 IE8 IE9 FireFox Chrome Safari Opera
Img: IE7 IE8 IE9 FireFox Chrome Safari Opera
The preceding results show that text-align: center; and margin: auto mainly refer to the display attribute of elements.
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
