1. text-align
text-align属性控制文字在盒子内的位置。可以将其赋值为left、right、center、justify。比如,想让一行文字居中显示,可以如下进行代码编写:
p{text-align:center;}
2. display
display属性可以控制元素的显示方式。常见的值有block、inline、inline-block、none等。其中,inline和inline-block可以将图片与文字并排显示。如果需要让图片在段落的左侧,文字在右侧,可以这样来给代码赋值:
img{display:inline-block;vertical-align:middle;}p{display:inline-block;}
3. float
float属性可以在HTML中使用图片和文字排版时实现文字环绕图片的效果。将图片向右浮动,文字就会出现在图片的左侧。代码如下:
img{float:right;}p{float:left;}
4. position
position属性可以用来移动元素的位置。它接受四个值:relative、absolute、fixed和sticky。其中,relative使元素相对于它原来的位置移动,而absolute使元素相对于父元素移动。还可以使用top、bottom、left、right等属性对元素进行偏移量的调整。
5. z-index
z-index属性控制元素在重叠时的显示优先级。一个元素的z-index值越高,就越优先显示。如果需要让图片在文字上方,可以将图片的 z-index 值设置为大于文本的 z-index 值,比如:
img{z-index:1;}p{z-index:0;}
以上就是一些关于CSS帮助我们设定文字与图片位置的属性介绍。希望这篇文章能帮助你对图片与文字的排版有一个更好的了解。