当前位置:网站首页>一篇文章带你了解CSS对齐方式
一篇文章带你了解CSS对齐方式
2020-11-06 20:42:41 【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
边栏推荐
- 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