You often use Line-height to set content (picture, text) row Height center style effect.
First, line-height row High grammar
Copy Code code as follows:line-height:+ number + unit (in the CSS layout we generally use pixel px as the unit)
The row height Line-height value can be a percentage number | The length value, consisting of floating-point numbers and unit identifiers, that is allowed to be negative. The percentage value is based on the height size of the font.
Second, the application of High Line
Line-height Row High attributes, the use of text typesetting, the implementation of the upper and lower text spacing distance, as well as the single row of text in a certain height vertically and horizontally centered layout.
1, for the article class text up and down spacing
In general, we set the object setting Line-height line High property to achieve the automatic line text typesetting evenly spaced how many settings.
2, vertical to the single row of text up and down vertically
If we are a fixed 30px height div object, if you want to let the text content vertically up and down, we can use line-height:30px.
Third, Line-height case
We set up two Div object boxes, one is multiple rows of text row height settings, and another height fixed a row of text, the implementation of text in the height of the upper and lower vertical center. Two cases we all use CSS line-height implementation.
1. CSS Code fragment
Copy Code code as follows:2. HTML code Fragment
Copy Code code as follows:Line-height Summary
Line-height row height up and down center property style, so that used for multiple rows of text such as the content of the article to achieve the center of the upper and lower spacing of the middle property, as well as a single row height fixed vertically and horizontally. Often meet the content and picture mixed row, we want the picture and text content centered in a row, but the text will reside in the lower part of the picture, usually the solution is to use two boxes to set the row height and height respectively.
In a row of text or content layout, if you want to center the content vertically, we only need to set the height height of the same length and line-height with the HTML unit can be vertically centered; if it is more than one column or the content of the article we usually set the average up and down interval of each line of text, This time we just need to set line-height row height can
Analysis of High Line height property in CSS
CSS Row height is not a difficult point, the reason is to let you know, the way to use more friendly. Don't miss the friends you need.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<meta http-equiv= "Content-type" Content= "text/html; Charset=utf-8 "/>
<style>
Body {line-height:1.5;}
</style>
<body>
This is the second line of content <p> A simple, step-by-step presentation about CSS row heights, covering line spacing, how to apply various types of row heights, and of course the inline box model, hoping to meet your
(but the actual combat application in Chinese fonts or in the English font mix, and Ie678,xp W in7, row high rule and different, tearful)
</p>
</body>
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
