CSS实现图片与文本的居中对齐的常见方式(css实现图片与文字对齐)

大家好！今天让小编来大家介绍下关于CSS实现图片与文本的居中对齐的常见方式的问题，以下是酷知号的小编对此问题的归纳整理，让我们一起来看看吧。

1.为图片和文本都设置vertical-align：middle

<style>
    .d1>* {
        vertical-align: middle;
    }
</style>
<div class='d1'>
    <img src='./1.jpg' width='100'/>
    <span>这是一段文本</span>
</div>

2.通过弹性布局实现，外层容器设置弹性布局，通过align-items: middle设置交叉轴居中对齐

<style>
    .d1 {
        display: flex;
        align-items: center;
    }
</style>
<div class='d1'>
    <img src='./1.jpg' width='100'/>
    <span>这是一段文本</span>
</div>

3.借助于背景图片实现，这时只需要文本居中即可

<style>
    .d1 {
        height: 133px;
        background: url(./1.jpg) 0 0 no-repeat;
        background-size: 100px 133px;
        padding-left: 100px;
        line-height: 133px;
    }
</style>
<div class='d1'>
    <!--<img src='./1.jpg' width='100'/>-->
    <span>这是一段文本</span>
</div>

4.图片与文本左浮动，同时设置容器元素的line-height

<style>
    .d1 *{
        float: left;
    }
    .d1 span {
        line-height: 133px;
    }
</style>
<div class='d1'>
    <img src='./1.jpg' width='100' height='133'/>
    <span>这是一段文本</span>
</div>

5.文本设置为行内块，图片垂直居中对齐

<style>
    .d1 img {
        vertical-align: middle;
    }
    .d1 span {
        display: inline-block;
    }
</style>
<div class='d1'>
    <img src='./1.jpg' width='100' height='133'/>
    <span>这是一段文本</span>
</div>

原创文章请随便转载。愿和大家分享，并且一起进步。– 江 coder

以上就是小编对于CSS实现图片与文本的居中对齐的常见方式问题和相关问题的解答了，CSS实现图片与文本的居中对齐的常见方式的问题希望对你有用！