左图右文字的排版，文字以图片为参照物居中的方法

在单页面的制作时，通常会遇到左图右文字的排版布局，如果图片较大，而文字较少，这时文字将与图片顶部平齐，而文字下方，将会出现大量空白，这时候，相信许多人会想要将文字以图片为参照物垂直居中，这样文字的上方和下方将会均匀留空非常美观，下面介绍两种方法来实现这样的效果。

第一种方法

HTML

<div class="wrap">
    <img src="https://picsum.photos/300/300?random=1" alt="image">
    <div class="txt">
        <h2>Specific Image</h2>
        <p>Get a specific image by appending ?image to the end of the url.You can find a list of all images here.</p>
    </div>
</div>

CSS

<style type="text/css">
.wrap {
    width: 600px;
    margin: auto;
    display: flex;
    align-items: center;
}

.wrap img {
    width: 50%;
    vertical-align: middle;
}

.txt {
    width: 50%;
    vertical-align: middle;
    padding-left: 20px;
}

</style>

第二种方法

HTML

<div class="wrap">
    <img src="https://picsum.photos/300/300?random=1" alt="image">
    <div class="txt">
        <h2>Specific Image</h2>
        <p>Get a specific image by appending ?image to the end of the url.You can find a list of all images here.</p>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.wrap {
    width: 600px;
    margin: auto;
    font-size: 0;
}

.wrap img {
    width: 50%;
    vertical-align: middle;
}

.txt {
    display: inline-block;
    width: 50%;
    font-size: 16px;
    vertical-align: middle;
    padding-left: 20px;
}

当然，如果你想要左文字右图，根据此方法也是一种可行的方案，是否非常简单呀！

未经允许不得转载：西德SEO » 左图右文字的排版，文字以图片为参照物居中的方法