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

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

相关推荐
荣达1 小时前
koa洋葱模型理解
前端·后端·node.js
reembarkation1 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu1 小时前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|2 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青2 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥2 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb2 小时前
【Python】字符串
java·前端·python
阿笑带你学前端2 小时前
Supabase云同步架构:Flutter应用的数据同步策略
前端
梦想CAD控件2 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
万少2 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos