What are the alignment methods in css

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

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

What are the alignment methods in css

1. Horizontal centering

• Horizontal centering of inline elements

If the set element is an inline element such as text, picture, etc., set text-align:center in the parent element to achieve horizontal centering of the inline element, and center the child element horizontally. The element's display is set to inline-block, making the child elements become inline elements

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div></div>
<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

• Horizontal centering of block elements (fixed width)

When the element being set is a fixed-width block-level element, text-align: center will not work. Centering can be achieved by setting the "left and right margin" value to "auto".

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
  </div>
  <style>
.child{
            width: 200px;
            margin: 0 auto;
        }
        </style>

• Horizontal centering of block elements (indefinite width)
  

In actual work, we will encounter the need to " "Block-level elements with variable width" are set to the center, such as pagination navigation on a web page. Because the number of paginations is uncertain, we cannot limit its flexibility by setting the width.

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

When the width of the variable-width block-level element does not occupy one line, you can set the display to inline type or inline-block (set to inline element display or inline block element)

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
<style>
.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;}
</style>

2. Vertical centering

is the same as horizontal centering. Here we talk about vertical centering. First set two conditions, that is, the parent element is a box container and the height has been set.

The child element is For inline elements, the height is supported by its content

In this case, you need to set the parent element's line-height to its height to vertically center the child element

<div class="wrap line-height">
    <span class="span">111111</span></div>
<style>
.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }
</style>

3. Horizontal and vertical centering

In the css tag, set the display attribute to flex to implement flex layout, then set the align-items attribute to center (horizontally centered), justify-content attribute Set to center (centered vertically). You can set it to be centered horizontally and vertically.

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    8f6d5a544bbc0d98e0f297ef053f784d
    ef0e6bda9678de73355aeb4407692a87
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    f0873f1cb3abec04fcd24e69fa165f9c
        45a2772a6b6107b401db3c9b82c049c2测试54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
46d5fe1c7617e3914f214aaf043f4ccf
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
531ac245ce3e4fe3d50054a55f265927
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What are the alignment methods in css. For more information, please follow other related articles on the PHP Chinese website!