css样式让字体居中,CSS样式—— 字体、元素的垂直水平居中

本文详细阐述了CSS样式与HTML标签属性的区别、内联元素与块元素的特点及应用,并介绍了多种实现居中的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.CSS样式与HTML中标签属性的区别:

标签的属性是采用 属性名=“属性值” 表示的

CSS样式是采用名值对 属性名:属性值; 表示的

2.内联元素(行内元素)与块元素

(1)内联元素及其特点:

所谓的行内元素,指的是只占自身大小,不会独占一行

常见的内联元素:

a img iframe span

span没有任何语义,span标签专门用来选中文字,并对该文字设置样式

对内联元素设置宽高是无效的,也不可以设置行高,其宽度和高度都默认被元素撑开

可以对内联元素设置内边距,IE6以上浏览器支持

可以对内联元素设置外边距,但只对左右外边距起作用

(2)块元素:

所谓的块元素是会独占一行的元素,无论他的内容多少都会独占一行

p h1 h2 h3...都是块元素

div标签没有任何语义,就是一个纯粹的块元素,并不会对其里面的元素设置任何样式

可以对块元素设置高度和边距

如果不自己设置宽度,其宽度为其父元素宽度

块元素中可以容纳块元素和内联元素,但内联元素中不能包含块元素

3.几种居中方式

(1)设置块元素中文字水平居中

使用text-align 样式设置块中文本或图片居中。

该样式只能操作块元素或者被CSS 显示成块元素的内联元素

对一个块元素设置该样式后,其子块元素中的文本或者图片也会相对于其子块元素居中

(2)块元素自身水平居中

通过设置 magin:0 auto; 使该块元素在其父元素中水平居中显示

(3)内联元素的垂直居中

通过设置 vertical-algin 属性

该属性适用于:

内联元素(被转换成内联元素的块元素)

display 设置为 table-cell 的元素

在 table 也就是表格中的元素

(4)设置块元素中文字水平居中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值