CSS总结

最新推荐文章于 2023-08-18 20:40:23 发布

原创最新推荐文章于 2023-08-18 20:40:23 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何通过div元素使图片在网页中居中显示，并探讨了div包裹ul与div嵌套span的问题解决方案。通过实例演示，帮助开发者掌握布局技巧，优化网页视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.如何让图片在div居中显示？
实现方式：
1. 让div包裹住img。
2. 利用div的自动居中 (margin: 0 auto;)

实际使用中必须为div指定高度和宽带，让大小和img一致。
另外可以通过dispaly:table来实现。


<div style="width:320px;height:260px;background-color: #FFFFFF;  border: 1px solid #CCCCCC;">
  				<div style="margin: 0 auto;display: table;border:1px solid red;">
  					<img style="max-height:240px;max-width:280px;" src="http://g1.ykimg.com/1100641F464CDB959CF107006F94B96F55BE3B-2804-8CF3-D46C-1A129930D5E6" />
  				</div>
  			</div>

[img]http://dl.iteye.com/upload/attachment/0064/3046/04d52706-adfc-3991-8029-461e706b60c0.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/0064/3048/2864826b-73b7-3485-980b-9a92f51ab19b.jpg[/img]

2. div包裹ul问题


<style>
.did{
     float:right;	
}
did li{
      float:left;	
}
</style>
<div  style="border:1px solid red;">
  	<ul class="did" >
  		<li>1</li>
  		<li>2</li>
  		<li>3</li>	
       </ul>
</div>

这段代码的效果是，ul不在div内部，可以为did使用display:inline-block属性。

3. div嵌套 span的问题


<div style="border:1px solid red;">
    <span style="float:right;">共分享24部视频</span>
</div>

这段代码中div里面的内容显示的时候会跑出div，如果为div指定一个height:28px那么文字过长会出现问题。这时可以用clearfix