大佬教程收集整理的这篇文章主要介绍了当使用块元素的div时,如何使用css对齐文本,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
+-----------+ + + + Image + Title TEXT Some text aligned on the right + + +-----------+
我正在纠正正确的文字问题.它会保持立即对齐标题文本右下方的一行,如下所示
+-----------+ + + + Image + Title TEXT + + Some text aligned on the right +-----------+
这是我目前的标价.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd"> <html> <head> <style type="text/css"> #header,#footer { padding: 0.3em 0; border-bottom: 1px solid; } #header img { display: inline;} #header h1 { display: inline; margin: 0px; padding: 0px; vertical-align: 50%; position: left;} #login-status { margin: 0px; padding: 0px; display: inline;text-align: right; position: right;} </style> <title>Models</title> </head> <body> <div id="header"> <img alt="Logo" height="110" width="276" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" /> <h1>Models</h1> <p id="login-status">You are currently logged in as steve</p> </div> <!-- end of header --> </body> </html>
我曾经期望内联样式不会导致h1元素之后的换行符,但事实并非如此.任何人都可以建议我做错了什么?
#header,#footer { padding: 0.3em 0; border-bottom: 1px solid; overflow: hidden; zoom: 1; } #header img { float: left;} #header h1 { float: left; margin: 0px; padding: 0px; } #login-status { margin: 0px; padding: 0px; float: right; }
在浮动时,不需要额外的元素或清除div.我经常使用上述技巧来做你正在做的事情.溢出:隐藏;使标题清除浮动,但是如果没有指定宽度,则需要缩放:1;对于IE6.缩放不验证,但它完美无缺,您可以将其添加到ie6只有css文件,如果需要的话.
以上是大佬教程为你收集整理的当使用块元素的div时,如何使用css对齐文本全部内容,希望文章能够帮你解决当使用块元素的div时,如何使用css对齐文本所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。