Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to set text center alignment in css. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Method: 1, use "text-align:center" or "margin:0 auto" to set horizontal center alignment; 2, use "line-height: value" or "display:table-cell;vertical-align:middle" setting vertical center alignment.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

First, level is in the middle: (1). Is the horizontal level of the elements in the line in the middle?

If the element is set to be an inline element such as text or picture, set text-align:center in the parent element to achieve horizontal centering of the inline element, set the display of the child element to inline-block, and make the child element become the inline element.

DEMO.parent {text-align: center;} .child {display: inline-block;}

(2) horizontal center of massive elements (fixed width)

Using text-align:center does not work when the element is set to be a fixed-width block-level element. This can be achieved by setting the "left and right margin" value to "auto".

DEMO.child {width: 200px; margin: 0 auto;}

(3) horizontal center of massive elements (indefinite width)

In practice, we will encounter the need to set the center for "block-level elements with variable width", such as paging navigation on a web page, because the number of pages is uncertain, so we can not limit its flexibility by setting the width.

You can directly set text-align:center for block-level elements with variable width, or you can add text-align:center to the parent element to achieve the centering effect.

Display can be set to inline type or inline-block (set to inline element display or inline block element) when the width of block-level elements with variable width does not occupy a row.

1 2 3. Container {text-align:center;background: beige} .container ul {list-style:none;margin:0;padding:0;display:inline-block;}. Container li {margin-right:8px;display:inline-block;} two, center vertically:

As with horizontal centering, to talk about vertical centering, first set two conditions, that is, the parent element is a box container and the height has been set.

Scenario 1: child elements are inline elements, and the height is supported by their contents

In this case, you need to center the child elements vertically by setting the line-height of the parent element as its height

111111.wrap {width:200px; height: 300px; line-height: 300px; border: 2px solid # ccc;} .span {background: red;}

Scenario 2: the child element is a block-level element but the height of the child element is not set. In this case, the height of the child element is not actually known and cannot be adjusted by calculating padding or margin, but there are still some solutions.

Solve the problem by setting display:table-cell;vertical-align:middle for the parent element

11111.wrap {width:200px; height: 300px; border: 2px solid # ccc; display: table-cell; vertical-align: middle;}. Non-height {background: green;}

Result

Scenario 3: child elements are block-level elements and the height has been set

Calculate the margin-top or margin-bottom of a child element as parent (element height-child element height) / 2

111111.wrap {width:200px; height: 300px; border: 2px solid # ccc;} .div1 {width:100px; height: 100px; margin-top: 100px; background: darkblue;}

Result

After reading the above, do you have any further understanding of how css sets the text center alignment? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.