一篇文章带你了解CSS对齐方式

浏览: 71

一、居中

1. 居中对齐元素

将块元素水平居中对齐(像 <div>) , 使用 margin: auto;

设置元素的宽度将阻止它伸展到容器的边缘。

然后元素将占用指定的宽度,剩下的空间将平分在两个边距之间:

这个div是居中的。

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

一篇文章带你了解CSS对齐方式

注意:如果没有设置宽度属性,则居中对齐没有效果 (或者设置到100%).


2. 居中对齐文本

将元素内部的文本居中, 使用text-align: center;

这些文本是居中的。

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

一篇文章带你了解CSS对齐方式


3. 居中图片

居中图片, 使用 margin: auto; 并且设置为块级元素:

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

一篇文章带你了解CSS对齐方式

二、左右

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;
}

效果图:

一篇文章带你了解CSS对齐方式

三、垂直居中,水平居中

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>

一篇文章带你了解CSS对齐方式

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;
}

一篇文章带你了解CSS对齐方式


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

如果paddingline-height不可选,第三种解决方案是使用定位和变换属性:

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

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

一篇文章带你了解CSS对齐方式

四、总结

本文基于Html基础,主要介绍了Html中对齐的方式,对于对齐中的标签做了详细的讲解,用丰富的案例 ,代码效果图的展示,帮助大家更好理解 。

最后,希望可以帮助大家更好学习CSS3。

想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/

前端进阶学习交流.jpg

推荐 0
本文由 dcpeng 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册