82_文本的水平和垂直对齐（图片也算作文本）（解决图片在基线对齐时存留空白的问题）

「已注销」

已于 2022-06-15 00:54:50 修改

阅读量247

点赞数

分类专栏： HTML CSS 基础文章标签： css

于 2021-08-22 10:10:52 首次发布

本文链接：https://blog.csdn.net/gty204625782/article/details/119848937

版权

本文介绍了CSS中的文本水平两端对齐和垂直对齐的设置方法，特别是如何处理图片在基线对齐时的空白问题。通过调整元素的vertical-align属性，可以实现图片的上下对齐，优化布局效果。

摘要由CSDN通过智能技术生成

CSS 文本格式

水平两端对齐：text-align: justify;

设置元素的垂直对齐：vertical-align
可选值：baseline（默认值）、top、bottom、middle
该属性定义【行内元素的基线】相对于【该元素所在行的基线】的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

图片的垂直对齐默认也是基线对齐，下面演示案例：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name<

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
82_文本的水平和垂直对齐（图片也算作文本）（解决图片在基线对齐时存留空白的问题）

CSS 文本格式水平两端对齐：设置元素的垂直对齐：可选值：baseline（默认值）、top、bottom、middle该属性定义【行内元素的基线】相对于【该元素所在行的基线】的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。图片的垂直对齐默认也是基线对齐，下面演示案例：所以我们需要更改图片的垂直对齐方式，来使图片更好的布局：............
复制链接

扫一扫