HTML(23)——垂直对齐方式

垂直对齐方式

属性名:vertical-align

属性值 效果
baseline 基线对齐(默认)
top 顶部对齐
middle 居中对齐
bottom 底部对齐

默认情况下浏览器对行内块,行内标签都按文字处理,默认基线对齐

导致图片看起来会偏上,文字偏下。

示例:

复制代码
   <style>
        div {
            border: 2px solid #333;
        }

        img {
            height: 200px;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/a.jpg">
        兄弟你好香
    </div>
</body>

可以看到图片的下方还有空白。接下来在img内添加vertical-align: middle;

复制代码
        img {
            height: 200px;
            vertical-align: middle;
        }

发现图片下方空白消失,并且文字也移动到了中间。

相关推荐
SUPER52662 小时前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx182 小时前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友4 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar4 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界7 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙7 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump7 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD7 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro8 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin8 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial