css，图片和文字在父元素垂直居中

最新推荐文章于 2024-04-09 14:04:15 发布

昨夜太平长安888

最新推荐文章于 2024-04-09 14:04:15 发布

阅读量969

点赞数 1

分类专栏：前端 CSS CSS3 文章标签： css html

本文链接：https://blog.csdn.net/HelloWord176/article/details/110917549

版权

前端同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

CSS3

4 篇文章 0 订阅

订阅专栏

css，图片和文字在父元素垂直居中，且图片和文字在中线对齐排列的几种方式

一，用flex的副轴来垂直居中对齐

1.副轴（由上到下）设置居中对齐（align-items: center;）即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>

    .a{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /*行高，使文字在父元素中垂直居中*/
        /*line-height: 200px;*/

        display: flex;
        /*justify-content: center;*/
        /*副轴对齐方式*/
        align-items: center;
    }

    img{
        /*margin-bottom: -16px;*/
        /*和文字中线对齐*/
        /*vertical-align: middle;*/
        width: 20%;
        height: 20%;

    }

    </style>
</head>
<body>
    <div class="a">

        <img src="img/11.jpg" alt="">
    <span>nioifhiughi</span>

    </div>
</body>
</html>

效果

二，利用vertical-align: middle ；

1.父元素设置行高，使文字垂直居中对齐，然后对图片设置vertical-align: middle ；使图片和文字的中线对齐

2.图片没设置vertical-align: middle ，图片和文字的中线不齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>

    .a{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /*行高，使文字在父元素中垂直居中*/
        line-height: 200px;

        /*display: flex;*/
        /*justify-content: center;*/
        /*副轴对齐方式*/
        /*align-items: center;*/
    }

    img{
        /*margin-bottom: -16px;*/
        /*和文字中线对齐*/
        vertical-align: middle;
        width: 20%;
        height: 20%;

    }

    </style>
</head>
<body>
    <div class="a">

        <img src="img/11.jpg" alt="">
    <span>nioifhiughi</span>

    </div>
</body>
</html>

三，对图片设置margin-bottom，注意值时要负数。

1.对图片未设置margin-bottom，时，图片和文字的中线不齐的，此时设置margin-bottom为负数，图片为慢慢往下移动，当图片和文字的中线对齐时就OK了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>

    .a{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /*行高，使文字在父元素中垂直居中*/
        line-height: 200px;

        /*display: flex;*/
        /*justify-content: center;*/
        /*副轴对齐方式*/
        /*align-items: center;*/
    }

    img{
        margin-bottom: -16px;
        /*和文字中线对齐*/
        /*vertical-align: middle;*/
        width: 20%;
        height: 20%;

    }

    </style>
</head>
<body>
    <div class="a">

        <img src="img/11.jpg" alt="">
    <span>nioifhiughi</span>

    </div>
</body>
</html>

不齐效果

一起齐的效果

昨夜太平长安888

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css，图片和文字在父元素垂直居中

css，图片和文字在父元素垂直居中，且图片和文字在中线对齐排列的几种方式一，用flex的副轴来垂直居中对齐1.副轴（由上到下）设置居中对齐（align-items: center;）即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .
复制链接

扫一扫