CSS usage tips (i)

In the use of CSS, there are a lot of tips, today to talk about CSS in the use of text settings.

In many cases, we will use the text of the horizontal center settings, such as the title of the article, in order to look good, we generally set the horizontal center. Different HTML elements have different ways of setting the horizontal center.

1. Inline elements

For inline elements, set the horizontal center, if the element is set as text, picture, and so on, you only need to set the Text-align:center in the parent element.

2. Block elements

For block elements, Text-align:center is not working, so how do we set it here in two cases:

1) fixed-width block elements

Set the left and right margin (margin) value to auto. For example: margin:10px Auto. The premise is, of course, that the width of the element is deterministic, i.e., width has a definite value, for example: width:200px.

2) variable-width block elements

There are three ways to set the horizontal center for an indeterminate block element:

A. Add a table label

Why add a table tag, the original table tag has an attribute-----adaptive length, does not define its length nor the length of the default body (the length of the table depends on the length of its content). Can be regarded as a fixed-width block element, using the margin around the set auto method to achieve horizontal centering.

B. Setting Display:inline

By setting the Display:inline, the elements are changed into inline elements, and the properties of the variable width elements are set.

C. Set the Position property to Relative,left to 50%

By setting the float:left,position:reletive,left:50% for the parent element. Sets the position:reletive,left:-50% for the child element to be horizontally centered. The horizontal centering setting is done by setting the related properties of the parent element, aligning the left edge of the parent element with the center of the body, and then setting the child element's related properties so that the midline of the child element coincides with the left edge of the parent element.

Sometimes in order to make the user experience good, we need to set the vertical center of the element. Set vertical centering in two cases:

1) parent element height-determined line of text

The goal of vertically centering is achieved by setting the parent element height and line-height uniformly. Where line-height refers to the baseline distance between lines of text and rows. The difference between line-height and font-size is divided into two halves, which are added to the top and bottom of a text content respectively. This high line of text and block high consistency brings a disadvantage: when the length of the text content is greater than the width of the block, there is content out of the block.

2) Multi-line text with parent element height determination

There are two ways to center vertically on multiple lines of text that are highly determined by the parent element:

A. Use the Insert table (including TBODY, TR, TD) labels while setting the Vertical-align:middle

There is a property in the CSS that is used for vertical centering vertical-align is useful for child elements of the Inline-block type when the parent element sets this style. TD Labels by default the vertical-align is set to middle.

B. Set the display property of block-level elements to Table-cell (set to table cells), activate Vertical-align properties

The advantage of this method is not to add redundant meaningless tags, but the disadvantage is also very obvious, it is not very good compatibility, incompatible with IE6, 7, and so modify the display block became Table-cell, destroying the original block elements of the nature.

In addition, there is an interesting phenomenon: when the float property of the set element is left or right, or if the position property of the set element is absolute, the element is automatically converted to a block-level element (Display:inline-block), regardless of the previous element. You can set the width and height of the element at this point.

CSS usage tips (i)