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实现图片与文本的居中对齐的常见方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。