在CSS层叠样式表中,对齐方式对于布局来说是一个非常重要的属性了,它是完成精细布局的大项。
1、元素的水平居中。使用margin:auto来实现,但是需要注意的是一定要定义元素宽度,否则将不起作用。
<style> .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } </style> <div class="center">这里是元素居中</div>效果如下:
如果想要左对齐可以设置margin-left:0px;相应的右对齐可以使用margin-right:0px;
2、元素内文本居中,可以使用text-align:center属性来定义。
<style> .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; text-align: center; } </style> <div class="center">这里是元素居中</div>效果如下:
如果想要左对齐可以使用text-align:left.如果想要右对齐可以使用text-align:right。
1、元素的垂直布局
元素的垂直方向布局可以使用margin也可以使用padding,前面说过关于这两个属性的用法,这里就不做介绍了。
2、文本的垂直布局
文本的垂直布局可以使用元素标签的padding也可以使用margin可控制垂直方向的位移,然后水平方向使用text-align属性即可配合制作出任何位置的文本。简单效果如下:
学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~
jQuery2021-01-08
jQuery2021-01-07
MySQL2020-12-13
电脑2020-12-12
服务器2020-12-06
电脑2020-10-06