Question

CSS达人进！图文混排问题，要求文字相对图片居中！！

原代码如下：
==============
<div class="ct">
<ul class="cc big_img">
<li> <img src="图片"> <p> 关于本图片的描述 </p></li>
</ul>
</div>
==========
图片是居左显示的， 现在想实现图片描述相对图片居中，效果如下图，如何实现？

请给出详细代码，多谢！

Answer 1

<div class="ct">
<ul class="cc big_img">
<li> <img src="index.jpg" width="200" height="250"> <p> 关于本图片的描述 </p></li>
</ul>
</div>

<style>
.ct{ width:200px;}
.big_img{ width:200px;}
.big_img li{ text-align:center;}
.big_img li p{ text-align:center;}
</style>
这样就行了

Answer 2

设置li的宽度如果图和li和宽度是一样的那就设文字居中text-aglin=center

Answer 3

设置p标签宽度为图片宽度 给p标签加上style="text-align:center;"

Answer 4

这个很简单啊，解决方法很多。第一种：

.cc big_img li p{text-align:center;}

第二种：把图片也放在p标签里面，和文字分开，即各放一个p

<li>
<p class="img"><img src="***.jpg"></p>
<p class="text">text</p>
</li>

这样的写法你随便想把图片和文字怎么排都行，各自给写样式就行了。

.text{text-align:left;}

当然你写这些之前你要把li和p的宽度计算好

Answer 5

li{text-align:center}
p{text-align:center}

追问

你这样图片不成居中的了吗？ 图片要居左！！！

追答

imginfo