CSS是一種用于網(wǎng)頁設(shè)計(jì)和排版的語言，它可以幫助我們輕松地創(chuàng)建文字環(huán)繞圖片的效果，而且還能讓圖片在文本中居中顯示。下面我們來看看如何實(shí)現(xiàn)這個(gè)效果。

<style>
.wrap {
width: 500px;
margin: 0 auto;
}
.img {
float: left;
margin-right: 20px;
}
.text {
text-align: justify;
}
</style>

首先，在HTML中定義一個(gè)容器用于包含文字和圖片。在這個(gè)容器中，我們需要添加圖片，并為它設(shè)置一個(gè)類名“img”，然后為文本添加一個(gè)類名“text”。

<div class="wrap">
<img src="image.jpg" alt="image" class="img">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo velit nec augue euismod, et ultrices libero elementum. Donec ut dolor eget nulla dictum pulvinar sed ut quam. Maecenas eget cursus elit, sit amet ultricies orci. Proin malesuada, sapien sed vestibulum eleifend, odio lectus varius mi, sed faucibus nisi nulla sit amet nisi. Phasellus in lorem nec nulla facilisis malesuada nec sit amet justo. Sed bibendum id nulla vel rhoncus. Vestibulum euismod volutpat velit a bibendum. Suspendisse euismod, lorem in consectetur accumsan, tellus neque rhoncus justo, ut imperdiet turpis justo vel ligula. Aliquam venenatis dui eu dui suscipit scelerisque. Donec eu interdum justo. Integer ac tempor dui, quis sollicitudin elit. Nullam iaculis laoreet magna sit amet bibendum. Etiam tempor, nulla eget maximus fermentum, orci libero eleifend elit, a euismod ante ex eget arcu.</p>
</div>

接下來，在CSS中，我們設(shè)定整個(gè)容器的寬度為500px，并使其水平居中。圖片使用float屬性使其在文本中浮動(dòng)，同時(shí)設(shè)置左邊距距離為20px，使其與左邊的文本相隔一定距離。最后，為文本設(shè)置text-align: justify樣式，使文本標(biāo)準(zhǔn)對齊。

通過以上的設(shè)置，在瀏覽器中預(yù)覽我們的網(wǎng)頁，你會(huì)發(fā)現(xiàn)文字已經(jīng)完美地環(huán)繞著圖片，而圖片也處于整個(gè)文本的中央位置！