当前位置：网站首页>An article will take you to understand CSS alignment

An article will take you to understand CSS alignment

2020-11-06 20:42:00 【Python advanced】

5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

One 、 In the middle

1. Center the elements

Align block elements horizontally ( image <div>) , Use margin: auto;

Setting the width of an element prevents it from extending to the edge of the container .

Then the element will take up the specified width , The rest of the space will be split equally between the two margins ：

This div It's in the middle .

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

Be careful ： If you do not set the width property , Then the center alignment has no effect ( Or set it to 100%).

2. Center text

Center the text inside the element , Use text-align: center;

The text is centered .

.center {
    text-align: center;
    border: 3px solid green;
}

3. Center the picture

Center the picture , Use margin: auto; And set to block level element :

img {
    display: block;
    margin: auto;
    width: 40%;
}

Two 、 about

HTML Code ：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Programming dictionary </title>

</head>
<body>

  <h2> Right alignment </h2>
  <p> An example of how to correctly locate elements and location properties :</p>

  <div class="right">
    <p> In my young and fragile years , My father gave me some advice that I've been thinking about .</p>
  </div>

</body>
</html>

1. Align left and right - Use position

One way to align elements is to use position: absolute;

In my young and fragile years , My father gave me some advice that I've been thinking about .

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

Be careful ：

Absolute positioning elements are removed from normal flow , And can overlap elements .

When using position When you align elements , Always define margin and padding by <body> Elements . This is to avoid visual differences in different browsers .

also IE8 And there are some problems with earlier versions , When using position. If the container element has a specified width ( for example ：<div class="container">) , And no settings !DOCTYPE, IE8 And earlier versions will add 17px Outside margin to right . It seems like a space for scrollbars . therefore , Always state !DOCTYPE When using position when :

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

2. Align left and right - Use float

Another way to align elements is to use float attribute :

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

Tips ：

When floating alignment is used for elements , Always for body Element defines margins and fills . This is to avoid visual differences in different browsers .

body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

design sketch ：

3、 ... and 、 Vertical center , Horizontal center

HTML Code ：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Programming dictionary </title>

</head>
<body>

  <h2> In the middle </h2>
  <p> In this case ,
      We use positioning and transform Property implements horizontal and vertical center of elements :</p>

  <div class="center">
    <!-- <p> I'm vertically centered .</p> -->
    <p> I'm horizontally and vertically centered .</p>
    
  </div>

  <p> Be careful : transform Property does not support IE8 And earlier versions .</p>

</body>
</html>

1. Use padding

There are many ways to center vertically CSS Elements . A simple solution is to use the top and bottom padding:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

Center horizontally and vertically , Use padding and text-align: center:

Vertical center

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

2. Use line-height

Another technique is to use line-height The property value is equal to height Property value .

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

3. Use position & transform

If padding and line-height Not optional , The third solution is to use location and transform properties ：

.center {
    height: 200px;
    position: relative;
    border: 3px solid green;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Four 、 summary

This article is based on Html Basics , It mainly introduces Html The way of alignment in , The label in alignment is explained in detail , With a wealth of cases , The code effect diagram shows , To help you better understand .

Last , Hope to help you learn better CSS3.

Want to learn more Python Web crawler and data mining knowledge , Go to a professional website ：http://pdcfighting.com/ Want to learn more Python Web crawler and data mining knowledge , Go to a professional website ：http://pdcfighting.com/

版权声明
本文为[Python advanced]所创，转载请带上原文链接，感谢