CSS控制html元素、文字的各种居中

最新推荐文章于 2023-11-01 17:56:27 发布

靡_初

最新推荐文章于 2023-11-01 17:56:27 发布

阅读量470

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/kettlo/article/details/114453851

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS水平居中

文章综合了一些各种常用的居中方法，使用场景大家仔细区分。

文章目录

1.居中元素中的文字

可以用text-align属性进行水平居中，也可以将text-align的属性值设置为left和right进行左右对齐的设置。

CSS样式

.align-center{
    height: 100px;
    background-color: lightcoral;
    
    /* 水平居中 */
    text-align: center;
}

html元素

<div class="align-center">水平居中</div>

在这里插入图片描述

2.元素（盒子、容器）居中（利用margin实现）

如果是居中一个元素，而不是元素里面的文字可以用如下方式实现。
前提：
- 盒子必须制定了宽度width。
- 盒子的左右外边距设置为auto。

.align-center {
    height: 100px;
    width: 100px;
    background-color: lightcoral;

    /* 水平居中 */
    margin: 0 auto;
}

<div class="align-center"> 
</div>

在这里插入图片描述

CSS垂直居中

1.单行文字垂直居中

利用line-height，将其属性值设置为容器相同高度，实现单行文字的垂直居中。

css代码

.heigt-center {
    height: 100px;
    background-color: lightgreen;
    line-height: 100px;
}

html代码

<div class="heigt-center">
    垂直居中
</div>

在这里插入图片描述

2.图片和文字垂直对齐（多用于头像姓名）

使用场景：一般做网页时需要让头像和姓名水平居中可以使用如下方法实现。

注意：

要给图片元素设置CSS属性：vertical-align: middle;
此属性需要设置给行内块元素，后面的文字才有效。

img {
    border-radius: 25px;
    width: 50px;
    height: 50px;
    
    vertical-align: middle;
}

<body>
    <div class="head">
        <img class="" src="img/head.jpg" />
        子非鱼
    </div>
</body>

CSS水平垂直居中

水平垂直居中常用下面.content中的三行代码实现，不过可以用.content2中比较简单的两行代码实现。

CSS样式

.content{
    height: 100px;
    background-color: skyblue;

    /* 水平垂直居中 */
    display: grid;
    align-items: center;
    justify-items: center;
}

.content2{
    height: 100px;
    background-color: lawngreen;

    /*水平垂直居中*/
    display: grid;
    place-items: center;
}

html元素

<div class="content">
    <p>水平垂直居中文字</p>
</div>

<div class="content2">
    <p>水平垂直居中文字</p>
</div>

<div class="content">
    <p>水平垂直居中文字</p>
</div>

<div class="content2">
    <p>水平垂直居中文字</p>
</div>

在这里插入图片描述

靡_初

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
CSS控制html元素、文字的各种居中

CSS元素和文字的各种居中CSS水平居中居中元素中的文字可以用text-align属性进行水平居中，也可以将text-align的属性值设置为left和right进行左右对齐的设置。CSS样式.align-center{ height: 100px; background-color: lightcoral; /* 水平居中 */ text-align: center;}html元素<div class="align-center"&
复制链接

扫一扫

专栏目录