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

多读书读好书 2020-11-03

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

一、居中

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

注意:

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

相关推荐

aSuncat / 0评论 2020-08-18