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 | 元素向右浮动 |


相关推荐
福兮说1 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas
传人once3 小时前
多图片上传预览功能如何写
前端·css·html·jquery·html5
Eric.463 小时前
Wan‑Animate+MiniMax-H3 本地部署 AI 漫剧流水线:8G 显存动作迁移与动态分镜工程实战
前端·人工智能·comfyui·ai漫剧
传人once4 小时前
悬停旋转放大和位移效果如何写
javascript·css·动画
库拉镜像AI牛牛5 小时前
短剧内容自动化生产:知漫剧工作室落地教程
大数据·服务器·前端·人工智能·语音识别
律宏阔5 小时前
Flutter 列表图片内存优化:CachedNetworkImage 与 ClipRRect 的取舍
前端·flutter
行者全栈架构师5 小时前
【鸿蒙心迹】相册文搜图工程化落地:HarmonyOS 7.0 端侧 AI 检索全链路实战与 5 个踩坑解法
前端
律宏阔5 小时前
Dart 3 Record:解决 Future.wait 异构返回值的类型问题
前端·flutter
Seraphina365 小时前
DVWA(XSS Reflected/Stored High,CSRF Low)
前端·xss·csrf
默_笙6 小时前
🍔 中间件不只是打日志:四个钩子、一次短路,和自带的工具
前端·javascript