当前位置:网站首页>一篇文章带你了解CSS对齐方式
一篇文章带你了解CSS对齐方式
2020-11-06 20:42:00 【Python进阶者】
一、居中
1. 居中对齐元素
将块元素水平居中对齐(像 <div>
) , 使用 margin: auto;
设置元素的宽度将阻止它伸展到容器的边缘。
然后元素将占用指定的宽度,剩下的空间将平分在两个边距之间:
这个div是居中的。
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
注意:如果没有设置宽度属性,则居中对齐没有效果 (或者设置到100%).
2. 居中对齐文本
将元素内部的文本居中, 使用text-align: center;
这些文本是居中的。
.center {
text-align: center;
border: 3px solid green;
}
3. 居中图片
居中图片, 使用 margin: auto;
并且设置为块级元素:
img {
display: block;
margin: auto;
width: 40%;
}
二、左右
HTML代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程字典</title>
</head>
<body>
<h2>右对齐</h2>
<p>如何正确定位元素与位置属性的一个例子:</p>
<div class="right">
<p>在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议.</p>
</div>
</body>
</html>
1. 左右对齐 - 使用 position
对齐元素的一种方法是使用 position: absolute;
在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议。
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
注意:
绝对定位元素从正常流中移除,并且可以重叠元素。
当使用 position
对齐元素时, 总是定义 margin
和 padding
为 <body>
元素. 这是为了避免不同浏览器的视觉差异。
还有IE8和早期版本有一些问题, 当使用 position
. 如果容器元素有一个指定的宽度 (例如:<div class="container">
) , 并且没有设置!DOCTYPE, IE8 和早期版本将添加 17px 外边距到右边. 这似乎是一条为滚动条预留空间. 因此,总是声明 !DOCTYPE 当使用 position
时:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
2. 左右对齐 - 使用 float
对齐元素的另一种方法是使用 float
属性:
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
提示:
当将元素使用浮动对齐时,总是为body
元素定义边距和填充。这是为了避免不同浏览器的视觉差异。
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
效果图:
三、垂直居中,水平居中
HTML代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编程字典</title>
</head>
<body>
<h2>居中</h2>
<p>在这个实例中,
我们使用定位和transform属性实现元素的水平和垂直居中:</p>
<div class="center">
<!-- <p>我是垂直居中的.</p> -->
<p>我水平垂直居中.</p>
</div>
<p>注意: transform属性不支持IE8和更早的版本.</p>
</body>
</html>
1. 使用 padding
有许多方法来中心垂直CSS元素. 一个简单的解决方案是使用顶部和底部 padding
:
.center {
padding: 70px 0;
border: 3px solid green;
}
水平和垂直居中, 使用 padding
和 text-align: center
:
垂直居中
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
2. 使用 line-height
另一个技巧是使用 line-height
属性值等于 height
属性值.
.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. 使用 position & transform
如果padding
和line-height
不可选,第三种解决方案是使用定位和变换属性:
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
四、总结
本文基于Html基础,主要介绍了Html中对齐的方式,对于对齐中的标签做了详细的讲解,用丰富的案例 ,代码效果图的展示,帮助大家更好理解 。
最后,希望可以帮助大家更好的学习CSS3。
想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/ 想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/
版权声明
本文为[Python进阶者]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4521128/blog/4701572
边栏推荐
- Skywalking series blog 5-apm-customize-enhance-plugin
- Programmer introspection checklist
- PHPSHE 短信插件说明
- Thoughts on interview of Ali CCO project team
- 深度揭祕垃圾回收底層,這次讓你徹底弄懂她
- The choice of enterprise database is usually decided by the system architect - the newstack
- 2019年的一个小目标,成为csdn的博客专家,纪念一下
- Menu permission control configuration of hub plug-in for azure Devops extension
- 在大规模 Kubernetes 集群上实现高 SLO 的方法
- In depth understanding of the construction of Intelligent Recommendation System
猜你喜欢
Didi elasticsearch cluster cross version upgrade and platform reconfiguration
Basic principle and application of iptables
使用 Iceberg on Kubernetes 打造新一代云原生数据湖
Use of vuepress
Do not understand UML class diagram? Take a look at this edition of rural love class diagram, a learn!
Summary of common algorithms of binary tree
Face to face Manual Chapter 16: explanation and implementation of fair lock of code peasant association lock and reentrantlock
2019年的一个小目标,成为csdn的博客专家,纪念一下
JVM memory area and garbage collection
如何将数据变成资产?吸引数据科学家
随机推荐
What problems can clean architecture solve? - jbogard
如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
Polkadot series (2) -- detailed explanation of mixed consensus
Wiremock: a powerful tool for API testing
钻石标准--Diamond Standard
How long does it take you to work out an object-oriented programming interview question from Ali school?
Don't go! Here is a note: picture and text to explain AQS, let's have a look at the source code of AQS (long text)
你的财务报告该换个高级的套路了——财务分析驾驶舱
Every day we say we need to do performance optimization. What are we optimizing?
ipfs正舵者Filecoin落地正当时 FIL币价格破千来了
加速「全民直播」洪流,如何攻克延时、卡顿、高并发难题?
Just now, I popularized two unique skills of login to Xuemei
Arrangement of basic knowledge points
中国提出的AI方法影响越来越大,天大等从大量文献中挖掘AI发展规律
Tool class under JUC package, its name is locksupport! Did you make it?
Vue 3 responsive Foundation
Analysis of react high order components
(1) ASP.NET Introduction to core3.1 Ocelot
How to demote a domain controller in Windows Server 2012 and later
Thoughts on interview of Ali CCO project team