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

This article introduces the relevant knowledge of "what is the alignment in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Method: 1. Use "text-align:center" style to achieve horizontal center. 2. Use the "line-height: row height;" style to achieve vertical centering. 3. Use "align-items:center;justify-content:center" style to realize horizontal and vertical center.

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

What are the alignments in css

I. level is in the middle

Horizontal center of elements in the line

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;}

Horizontal center of block 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;}

The horizontal center of the block element (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;}

Second, vertically centered

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.

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;}

3. Horizontal and vertical center

Within the css tag, set the display property to flex to implement the flex layout, then set the align-items property to center (horizontal center) and the justify-content property to center (vertical center). Can be set to horizontal and vertical center.

Document test. Mydiv {width:200px; height:100px; border:1px solid black; display:flex; align-items:center; justify-content:center;} "what are the alignments in css"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.