来谈谈：网页图文混排教程:图文居中显现

显示全部楼层 · 发表于 2015-1-15 23:16:04

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
破洛洛文章简介：用到的CSS属性值：inline-block:将工具呈递为内联工具，可是工具的内容作为块工具呈递。中间的内联工具会被呈递在统一行内就如许，完善的图文居中显现就做出来了。是否是很惊异？现实告知我们，公道的使用CSS既可完成一些仿佛不太大概的效果。
事情中常常会碰到一个图文的效果，如图：

登录/注册后可看大图

再罕见不外的效果了，关于上面的笔墨，一样平常我们的处置体例是居中，但笔墨多了会怎样办呢？有人会回覆“埋没”；也有人会回覆“换行”。
关于“换行”的处置办法我们会碰到一个成绩，假如是笔墨居中，那第二行也会居中，如许就会形成一种不友爱的体现效果。
那末有无一种办法能够针对第一行的笔墨完成居中，第二行的笔墨完成居左显现呢?
请看：

登录/注册后可看大图

运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/><title>demo</title><linktype="text/css"href="http://wkaifang.com/demo/css/reset.css"rel="stylesheet"media="screen"/><styletype="text/css">.demoli{display:inline;float:left;width:100px;text-align:center;margin:10px;}.demoliimg{display:block;}.demolistrong{display:inline-block;text-align:left;}.demolistronga{text-align:left;}</style></head><bodyonload="document.execCommand(BackgroundImageCache,false,true)"><ulclass="demo"><li><ahref="#">我是居中的</a></strong></li></ul></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
CSS以下：
.demoli{display:inline;float:left;width:100px;text-align:center;margin:10px;}
.demoliimg{display:block;}
.demolistrong{display:inline-block;text-align:left;}
.demolistronga{text-align:left;}
HTML以下：
<ul>
<li><ahref=”#”></a><strong><ahref=”#”>我是居中的</a></strong></li>
</ul>
用到的CSS属性值：inline-block:将工具呈递为内联工具，可是工具的内容作为块工具呈递。中间的内联工具会被呈递在统一行内就如许，完善的图文居中显现就做出来了。是否是很惊异？现实告知我们，公道的使用CSS既可完成一些仿佛不太大概的效果。
</p>
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：网页图文混排教程:图文居中显现

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子