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;
        }

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

相关推荐
曲莫终15 分钟前
JAVA原生Servlet支持SSE
前端·后端
用户486789525339015 分钟前
Apache ECharts 雷达图详解
前端·javascript
活着也很快乐18 分钟前
vite4 + react18 + react-router-dom6 路由懒加载、路由重定向
前端
吴玺喆20 分钟前
pnpm 10.14 支持JavaScript运行时的安装了
前端
Moment30 分钟前
2025 年,构建高质量 React 项目的技术栈参考 🤔🤔🤔
前端·javascript·react.js
陶甜也37 分钟前
MCP-Blender插件的安装和使用
前端·ai·blender
网小鱼的学习笔记40 分钟前
python基础:数据解析BeatuifulSoup,不需要考虑前端形式的一种获取元素的方法
开发语言·前端·python
aiwery43 分钟前
深入理解React hooks:从设计初衷到自定义Hook指南
前端·设计模式
namehu1 小时前
阿里云 acme.sh install timeout(超时)问题解析与解决方案
linux·前端·https
浩男孩1 小时前
🍀简简单单使用 TS 封装个工具库【更新中 ✍】
前端·typescript