虚拟主机域名注册-常见问题 → 网络编程问题 → CSS/HTML | |||||||
图片和文字对齐的方法
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。 设置各对象的vertical-align属性,属性说明: baseline-将支持valign特性的对象的内容与基线对齐 sub-垂直对齐文本的下标 super-垂直对齐文本的上标 top-将支持valign特性的对象的内容与对象顶端对齐 text-top-将支持valign特性的对象的文本与对象顶端对齐 middle-将支持valign特性的对象的内容与对象中部对齐 bottom-将支持valign特性的对象的文本与对象底端对齐 text-bottom-将支持valign特性的对象的文本与对象顶端对齐 在此设置为text-bottom即可实现图片与文字位于同一水平线上,好看多了 css+DIV里面是文字和图片居中对齐 <div> <div>文字与图片对齐方式<span style="vertical-align:middle;"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:baseline"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<img src="b-grade.png"></div> <br> <div>文字与图片对齐方式<span style="vertical-align:bottom"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:sub"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:super"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:text-bottom"><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:text-top><img src="b-grade.png"></span></div> <br> <div>文字与图片对齐方式<span style="vertical-align:top><img src="b-grade.png"></span></div> </div> 方法二:通常图片与文字放在一起的时候图片往往会偏上,通过设置margin-bottom可以达到文字图片底边对齐的目的 我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题.(一般表现在图片总是比文字高点) 解决问题最好的办法:一个关键的属性: margin-bottom 通过修改图片的外边框的底部高度就可以让文字移动上来. 做法是把这个值设置为负数.例如我们把下面的16X15的图片设置它的 <img src="bottom.gif" style="margin-bottom:-3px"> 或者在样式里面设置 img { margin-bottom:-3px; } 这样文字和图片就居中了. 这个值随着图片的大小不同而改变,具体的大家测试一下就知道了. 方法三: li{ margin: 0px; padding: 20px 3px 3px 8px; background: url(images/sohu_06.jpg) no-repeat 0 50%; list-style-type: none; list-style-position: inside; }
|
|||||||
>> 相关文章 | |||||||
没有相关文章。 | |||||||
发表评论 | |||||||