In the previous article, I briefly summarized a "CSS method to achieve horizontal centering of divs in page layout". In fact, horizontal centering is relatively simple, but vertical centering is a bit troublesome because we design the page. Often the horizontal width is fixed. Therefore, it is necessary for us to summarize the methods to achieve vertical centering during page layout.
When talking about this issue, some people may ask, isn’t there a vertical-align attribute in CSS to set vertical centering? Even if some browsers don't support it, I only need to do a little CSS Hack technology! So I have to say a few words here. There is indeed a vertical-align attribute in CSS, but it only takes effect on elements with valign attributes in (X)HTML elements, such as
, < in table elements. ;th>,
, etc., and elements like
, do not have valign attributes, so using vertical-align will not work on them.
1. Single-line vertical centering If there is only one line of text in a container, it is relatively simple to center it. We only need to set its actual height to be equal to the line-height of the line it is in. . For example:
view plain copy to clipboard print ?
div { height:25px; line-height:25px; overflow:hidden; }
div { height:25px; line-height:25px; overflow:hidden; }
Copy after login
This code is very simple. The overflow:hidden setting is used later to prevent the content from exceeding the container or causing automatic line wrapping, so that the vertical centering effect cannot be achieved. Click here to see the running effect However, in Internet Explorer 6 and below, this method does not support vertical centering of images.
2. Vertical centering of multi-line text of unknown height If the height of a piece of content is variable, then we can use the last line used to implement horizontal centering mentioned in the previous section. The first method is to set the Padding so that the upper and lower padding values are the same. Again, this is a way of "looking" vertical centering, it's just a way of making the text completely fill the
. You can use code similar to the following:
view plain copy to clipboard print ?
div { padding:25px; }
div { padding:25px; }
Copy after login
This The advantage of this method is that it can run on any browser and the code is very simple. However, the prerequisite for the application of this method is that the height of the container must be scalable. Click here to see the running effect
3. Centering multi-line text with a fixed height At the beginning of this article, we have said that the vertical-align attribute in CSS will only work with valign features The (X)HTML tag works, but there is also a display attribute in CSS that can simulate
, so we can use this attribute to let
simulate
and then use vertical-align. Note that when using display:table and display:table-cell, the former must be set on the parent element, and the latter must be set on the child element, so we need to add another
Click here to see the running effect This method should be ideal, but unfortunately The problem is that Internet Explorer 6 does not correctly understand display:table and display:table-cell, so this method is invalid in Internet Explorer 6 and below. Well, that’s depressing! But we have other options.
4. Solution in Internet Explorer In Internet Explorer 6 and below, there are high computational flaws. After positioning the parent element in Internet Explorer 6, if the percentage calculation is performed on the child element, the calculation basis seems to be inherited (if the positioning value is an absolute value, there is no such problem, but using the percentage calculation basis will It is no longer the height of the element, but the positioning height inherited from the parent element). For example, we have the following (X)HTML code snippet:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,
This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
Web Front-end
