What are the alignment methods in css-CSS Tutorial-php.cn

What are the alignment methods in css

WBOY

Release： 2021-11-18 14:30:29

Original

7767 people have browsed it

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.

What are the alignment methods in css

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="mydiv">
        <span>测试</span>
</div>
<style type="text/css">
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
</style>
</body>
</html>

Copy after login

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!