| The code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
The code is very simple. It refers to a div label of class = "wall", a label, and an img label of class = "img404.
The next step is to write css. First, let the div of class = "wall" have a width and height of 100% to fill the whole page. CSS is as follows:
| The code is as follows: | Copy code |
<Style type = "text/css"> |
|
In CSS, I am afraid it is worth mentioning why we need to use absolute position: absolute and the _ height: 100% style. I have tried many methods, as a result, I can only use absolute positioning to make its height: 100% take effect. Of course, fixed positioning (position: fixed) is also acceptable, but IE6 does not support it; _ height: 100% is designed to be compatible with IE6, so that the div of class = "wall" can also be 100% high in IE6. If you want to verify whether the div of class = "wall" has filled the entire page, you can set a background color in. wall. I will not do this here.
The code on the entire page is as follows:
| The code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
Vertical-align: middle to implement vertical center, because the class = "wall" div fills the entire page, therefore, you only need to vertically center the image in the div of class = "wall" to achieve the goal. In the past, we always thought that vertical-align and text-align are the same principle. One is vertical center and the other is horizontal center. If we add a vertical-align to the div of class = "wall: the middle enables the image to be vertically centered without any effect. In fact, vertical-align is totally different from text-align. If we add a text-align: center to the div of class = "wall", we can undoubtedly center the img horizontally, but vertical-align cannot be used like this.
Let's take a look at the definition of vertical-align on W3C: vertical-align attribute sets the vertical alignment of elements. This attribute defines the vertical alignment between the baseline of an element in a row and the baseline of the row where the element is located. The negative length Value and Percentage value can be specified. This reduces the number of elements rather than increases. In table cells, this attribute sets the cell content alignment in the cell box.
I have to admit that this sentence has been read for a long time before I understand what it means. My understanding is that it has two usage methods:
First, let's look at the following sentence: "In the table cell, this attribute sets the alignment of the cell content in the cell box ." This is easy to understand. If you add a vertical-align: middle style to the td of a table, the content in the table is vertically centered. Similarly, if you give a vertical-align: bottom is aligned at the bottom. If a vertical-align: top is given, it is aligned at the top.
The second usage is as follows: "This attribute defines the vertical alignment of the baseline of the element in the row to the baseline of the row where the element is located ." I can't say anything in a professional language. It can be used as a metaphor: assume that there are two elements a and B in the row, and both a and B are img. When a adds a vertical-align: middle style, the bottom (baseline) of B is aligned with the center position of a, as shown in the following figure:
If both a and B have a vertical-align: middle style, they are aligned with each other in the middle, that is, the midline alignment in the vertical direction, as shown in the figure below:
Here, the idea is clear (PS: We should know that vertical-align can set middle, top, bottom, and so on, or even set specific values or percentages, if you want to know what the effect will be, you can experiment with it by yourself .).
Next I will go back to the topic of this article. Now I want the img of class = "img404" to vertically center in the div of class = "wall, I can add a span empty label in the div, set its height to 100%, and then give it a vertical-align: middle style. Similarly, I can give img a vertical-align: in the middle style, the img can be vertically centered in the div. As shown in the following figure:
| The code is as follows: | Copy code |
| <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Title> Page 404 </title> <Style type = "text/css"> Body {margin: 0; background: #333; _ height: 100% ;} . Wall {width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center; font-size: 0 ;} . Img404 {border: 0; width: 700px; vertical-align: middle ;} . VerticalAlign {vertical-align: middle; display: inline-block; height: 100%; width: 1px; margin-left:-1px ;} </Style> </Head> <Body> <Div class = "wall"> <Span class = "verticalAlign"> </span> <A href = "index.html"> </a> </Div> </Body> </Html> |
|
In the above CSS, the face value must be mentioned. verticalAlign adds a display: inline-block to trigger its layout so that the span without layout can be set to width and height, margin-left: -1px is used to move the span to the left of a pixel, and the img returns to the center in the horizontal direction. the font-size: 0 in wall, as I mentioned in the previous article, aims to eliminate the gap caused by line breaks.
The final result is as follows:
About
I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.
CSS:
| The code is as follows: | Copy code |
Div. categoryLinks {
HTML: <Div class = "categoryLinks"> |
|
Screenshot:
UPDATE: just to be clear, I am aware more-or-less how vertical-align works, I. e. I already know the common misconceptions.
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
