水平与竖直的居中

文章目录

• 前言
• 一、文字的水平竖直居中
• 二、图片的水平竖直居中
• 总结

---

前言

在HTML中为了实现水平与竖直居中的情况，需要我们熟练运用text-align，line-height以及vertical-align的样式，并且在各种各样的情况下形成水平与竖直居中，而用的最多的就是文字以及图片的居中。

一、文字的水平居中与竖直居中

<div style="text-align: center;">span</div>

其中style是属性样式，我们需要在其中输入text-align:center来形成让div中的文字水平居中。

        <span style="line-height: ;"></span>

其中style是属性样式，我们在其中输入line-height：行高来形成文字的竖直居中，当值过大于行高会使得文字向下靠，而值过小于行高会使得文字向上靠拢。

两个样式一起使用便可以让文字既水平居中又竖直居中了。

二、图片的水平居中与竖直居中

        <img src="" alt="" style="vertical-align: ;">

vertical-align:一共有三个大值分别为top：让图片头部对齐；middle让图片中心对齐；bottom然图片底部对齐。三种方法可以让图片在任何场景实现对齐。

图片标签img，其中打入style样式属性，而vertical-align：middl是为了让图片对齐中心，这样做出来的网页会比较规整。

        <div style="margin:0 auto;">
            <img src="" alt="">
        </div>

图片标签如果想让其水平居中，可以在外层写一个div标签，让div标签居中，图片便会和div一样跑到中心区域。

---

总结

在HTML中实现文字或者图片的水平竖直居中，可以使用很多种方法，这仅仅只是一种。