如何理解CSS对齐方式

本篇内容主要讲解“如何理解CSS对齐方式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何理解CSS对齐方式”吧!

创新互联建站专注于广水网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供广水营销型网站建设,广水网站制作、广水网页设计、广水网站官网定制、微信小程序定制开发服务,打造广水网络公司原创品牌,更为您提供广水网站排名全网营销落地服务。

一、居中

1. 居中对齐元素

将块元素水平居中对齐(像

) , 使用 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代码:

       编程字典       

右对齐

   

如何正确定位元素与位置属性的一个例子:

         

在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议.

   
   

1. 左右对齐 - 使用 position

对齐元素的一种方法是使用 position: absolute;

在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议。

.right {     position: absolute;     right: 0px;     width: 300px;     border: 3px solid #73AD21;     padding: 10px; }

注意:

绝对定位元素从正常流中移除,并且可以重叠元素。

当使用 position对齐元素时, 总是定义 margin 和 padding 为 元素. 这是为了避免不同浏览器的视觉差异。

还有IE8和早期版本有一些问题, 当使用 position. 如果容器元素有一个指定的宽度 (例如:

) , 并且没有设置!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代码:

       编程字典       

居中

   

在这个实例中,      我们使用定位和transform属性实现元素的水平和垂直居中:

              

我水平垂直居中.

        
    

注意: transform属性不支持IE8和更早的版本.

   
如何理解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

如果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%); }
如何理解CSS对齐方式

到此,相信大家对“如何理解CSS对齐方式”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


本文题目:如何理解CSS对齐方式
URL链接:http://pwwzsj.com/article/ihoojc.html