当前位置:网站首页>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】
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]所创,转载请带上原文链接,感谢
边栏推荐
- Filecoin has completed a major upgrade and achieved four major project progress!
- ERD-ONLINE 免费在线数据库建模工具
- StickEngine-架构11-消息队列(MessageQueue)
- Top 5 Chinese cloud manufacturers in 2018: Alibaba cloud, Tencent cloud, AWS, telecom, Unicom
- The dynamic thread pool in Kitty supports Nacos and Apollo multi configuration centers
- What course of artificial intelligence? Will it replace human work?
- ado.net和asp.net的关系
- Unity性能优化整理
- Named entity recognition in natural language processing: tanford core LP ner (1)
- Pollard's Rho algorithm
猜你喜欢
Ronglian completed US $125 million f round financing
What are manufacturing and new automation technologies?
大会倒计时|2020 PostgreSQL亚洲大会-中文分论坛议程安排
Behind the first lane level navigation in the industry
【自学unity2d传奇游戏开发】如何让角色动起来
Git rebase is in trouble. What to do? Waiting line
Will blockchain be the antidote to the global epidemic accelerating the transformation of Internet enterprises?
How about small and medium-sized enterprises choose shared office?
What is alicloud's experience of sweeping goods for 100 yuan?
The difference between gbdt and XGB, and the mathematical derivation of gradient descent method and Newton method
随机推荐
To Lianyun analysis: why is IPFs / filecoin mining so difficult?
html+vue.js 實現分頁可相容IE
Uncle Bob: the software architecture is similar to a house. Object oriented is the structure of the house, and the water pipe is functional programming
JNI-Thread中start方法的呼叫與run方法的回撥分析
How to turn data into assets? Attracting data scientists
The dynamic thread pool in Kitty supports Nacos and Apollo multi configuration centers
事件监听问题
How about small and medium-sized enterprises choose shared office?
嘉宾专访|2020 PostgreSQL亚洲大会阿里云数据库专场:王涛
检测证书过期脚本
DC-1靶機
C#和C/C++混合编程系列5-内存管理之GC协同
hdu3974 Assign the task線段樹 dfs序
快速排序为什么这么快?
事务的隔离级别与所带来的问题
C + + and C + + programmers are about to be eliminated from the market
Behind the record breaking Q2 revenue of Alibaba cloud, the cloud opening mode is reshaping
如何在终端启动Coda 2中隐藏的首选项?
es创建新的索引库并拷贝旧的索引库 实践亲测有效!
The importance of big data application is reflected in all aspects