当前位置:网站首页>An article will take you to understand CSS alignment
An article will take you to understand CSS alignment
2020-11-06 20:42:41 【Python advanced】
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]所创,转载请带上原文链接,感谢
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World