Home > Developer > Web Develop
1. How do I make text vertically centered inside a container?
(1) Method: Add the Line-height property to the container so that the value of line-height equals the height of the container.
(2) Code
<!doctype html>(3) principleFirst of all, the meaning of line-height should be clarified. The meaning of the Line-height property is to set the distance between lines, called Row heights. And the character of the text will be the center of the line to display . That is, we can do the following: Set a container div, do not set the height, the internal text for its specified row height, in chrome to change the row height, we will find that the text has been in the container vertically centered display . (Here the size of the container is completely open to the text, which is precisely the line-height of its open)
So if the external div size is determined, its internal text set Line-height to the height of the container, from the visual effect of the text to achieve the vertical center. However, it should be noted that this effect is not the result of the two mates, but that the display of the text itself is centered around the midline.
2. How to implement the three-column layout, the fixed width of the middle adaptive?
(1) Method: Using floating, respectively, the left and right sides of the div set to both sides of the floating, and then for the middle Div set the corresponding margin
(2) Code
<!doctype html>(3) principleThis takes advantage of the default width method. A Div, if you don't set a width for it, the default value of its width is 100%. That is, if the width of the parent element is when we set the Margin-left and Margin-right property values on this basis, the width of the div will be narrowed accordingly.
Note that the default value for height is 0.
3. How to make a div fill the entire screen
(1) Method: Set the background map width and height to 100%, and set the position to fixed.
(2) Code
<!doctype html>(3) principleIf you only set width and height to 100%, the width can reach 100%, but the height does not change. The position:fixed is set, meaning that an absolutely positioned element is generated and positioned relative to the browser window . Therefore, after this setting, the entire container element is set according to the window, the height of 100% is relative to the current window size of 100%.
Page Refactoring CSS Tips summary (8.1-8.5)
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
