CSS水平与竖直剧中的实现（非常简单！！！！！）

最新推荐文章于 2022-09-22 13:40:16 发布

Brooke_w

最新推荐文章于 2022-09-22 13:40:16 发布

阅读量257

点赞数 2

文章标签：前端 html css

本文链接：https://blog.csdn.net/Brooke_w/article/details/126007025

版权

文章目录

本篇主要讲解居中的问题
一、文本居中/元素居中
二、图片居中

前言

我们在编写网页的时候总是遇到文本不居中或者图片不居中跟文本对不齐的情况，接下来我们就说一说这个问题。

一、文本居中/元素居中

text-align属性用于控制文本水平方向的位置，line-height用于控制文本的高度和垂直居中，

如果想要内部所有元素都居中，需要在容器编写，让内部元素都居中。

比如代码如下

div容器中书写，这样就实现了内部元素水平竖直都居中

div {
            /* 在容器编写 让内部元素居中 */
            text-align: center;
            height: 60px;
            line-height: 60px;
            background-color: antiquewhite;
        }

二、图片居中

图片位置需要使用到我们的vertical-align属性

值可以书写baseline 基线默认位置

bottom 父容器底部

top 父容器顶部

middle 父容器中心线对其

text-bottom 父容器内部的文本的底部对齐

text-top 父容器内部的文本的顶部对齐

同时如果位置不理想，属性值可以设置具体的px来进行微调

整体代码如下

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 在容器编写 让内部元素居中 */
            text-align: center;
            height: 60px;
            line-height: 60px;
            background-color: antiquewhite;
        }

        img {
            /* vertical-align: middle;
            在目标对象写 用于控制数值位置*/
            /* baseline  基线默认位置
            bottom  父容器底部
            top     父容器顶部
            middle  父容器中心线对其  
            text-bottom 父容器内部的文本的底部对齐
            text-top  父容器内部的文本的顶部对齐
            
            */
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div><img src="../day0725/1.img/2.png" alt="">
        <a href="">饿了么</a>
    </div>
</body>

</html>

这样就实现了图片和文本的居中

以上就是今天要讲的内容，讲解了文本的水平竖直居中和图片的居中及其他位置调整，欢迎大家沟通讨论！