CSS新手入门笔记整理:CSS图片样式

图片大小

语法

复制代码
width:像素值;
height:像素值;

图片边框:border

语法

边框:宽度值 样式值 颜色值;

复制代码
border:1px solid red;

图片对齐

水平对齐:text-align

语法

复制代码
text-align:取值;

|---------|----------|
| 属性值 | 说明 |
| left | 左对齐(默认值) |
| center | 居中对齐 |
| right | 右对齐 |

  • 图片是在父元素中进行水平对齐,因此我们应该在图片的父元素中定义。

垂直对齐:vertical-align

语法

复制代码
vertical-align:取值;

|----------|--------|
| 属性值 | 说明 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| baseline | 基线对齐 |
| bottom | 底部对齐 |

  • vertical-align属性是定义周围的行内元素或文本相对于该元素的垂直方式。

文字环绕方式:float

复制代码
float:取值;

|---------|--------|
| 属性值 | 说明 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |


相关推荐
梦曦i3 分钟前
uni-app x 0.7.0重磅升级:插件实例化,原生编译彻底打通
前端·uni-app x
开开心心就好12 分钟前
C盘空间不够用?一键扫描清理系统垃圾
前端·javascript·安全·支持向量机·语音识别·etcd·模拟退火算法
爱喝水的小周14 分钟前
实验八 Vue‑Router 路由插件实践
前端·javascript
ℋᙚᵐⁱᒻᵉ鲸落23 分钟前
ETypeError: nameRef.value?.focus is not a functio. 设置el-input自动聚焦时报错
前端·javascript·vue.js·elementui
JavaGuide26 分钟前
为什么越来越多人放弃 Claude Code 转而用 Pi?
前端·后端
SEO_juper29 分钟前
2026年用Python检查多语言站点hreflang:自动揪出“回链缺失/标错语言“等致命错误(附完整代码)
开发语言·前端·seo·独立站·谷歌优化
+VX:Fegn089510 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
Nicander11 小时前
我给 Excalidraw 做了一个本地工作区:DrawSpace
前端·开源
linux_cfan13 小时前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
计算机魔术师13 小时前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端