在網(wǎng)頁設(shè)計(jì)中，文字和圖片的位置排布顯得尤為重要。對(duì)于CSS（層疊樣式表）而言，有很多可用來控制文字和圖片的位置的屬性。下面我們將一一介紹這些屬性及其用法。
1. text-align
text-align屬性控制文字在盒子內(nèi)的位置。可以將其賦值為left、right、center、justify。比如，想讓一行文字居中顯示，可以如下進(jìn)行代碼編寫：

p{
text-align:center;
}

2. display
display屬性可以控制元素的顯示方式。常見的值有block、inline、inline-block、none等。其中，inline和inline-block可以將圖片與文字并排顯示。如果需要讓圖片在段落的左側(cè)，文字在右側(cè)，可以這樣來給代碼賦值：

img{
display:inline-block;
vertical-align:middle;
}
p{
display:inline-block;
}

3. float
float屬性可以在HTML中使用圖片和文字排版時(shí)實(shí)現(xiàn)文字環(huán)繞圖片的效果。將圖片向右浮動(dòng)，文字就會(huì)出現(xiàn)在圖片的左側(cè)。代碼如下：

img{
float:right;
}
p{
float:left;
}

4. position
position屬性可以用來移動(dòng)元素的位置。它接受四個(gè)值：relative、absolute、fixed和sticky。其中，relative使元素相對(duì)于它原來的位置移動(dòng)，而absolute使元素相對(duì)于父元素移動(dòng)。還可以使用top、bottom、left、right等屬性對(duì)元素進(jìn)行偏移量的調(diào)整。
5. z-index
z-index屬性控制元素在重疊時(shí)的顯示優(yōu)先級(jí)。一個(gè)元素的z-index值越高，就越優(yōu)先顯示。如果需要讓圖片在文字上方，可以將圖片的 z-index 值設(shè)置為大于文本的 z-index 值，比如：

img{
z-index:1;
}
p{
z-index:0;
}

以上就是一些關(guān)于CSS幫助我們設(shè)定文字與圖片位置的屬性介紹。希望這篇文章能幫助你對(duì)圖片與文字的排版有一個(gè)更好的了解。