一、居中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。 ------------------- End -------------------
|