两种CSS控制:fieldset垂直滚动和图片文字垂直居中
2014-04-23 15:40
197 查看
1. 让fieldset里面出现垂直滚动条
很多情况下,当fieldset中的内容很多时,我们希望不用自动延长fieldset的高度,而是将其控制在一个固定高度上,然后用垂直滚动条来查看所有的内容。方法很简单,只是有几个需要注意的地方,如注释中所示。<fieldset style="width: 230px; height: 100px;"> <legend>basic information</legend> <!-- 1. 不管fieldset中的内容是什么,用一个div全包起来 --> <!-- 2. 设置div的height,并设置overflow:auto --> <div style="height:100%;overflow:auto;"> <table> <tr> <td>name:</td> <td><input type="text" /> </td> </tr> <tr> <td>gender:</td> <td><input type="text" /> </td> </tr> <tr> <td>age:</td> <td><input type="text" /> </td> </tr> <tr> <td>height:</td> <td><input type="text" /> </td> </tr> <tr> <td>weight:</td> <td><input type="text" /> </td> </tr> </table> </div> </fieldset>最终效果如下图所示:
2. 垂直居中图片和文字
下面是一个图片和文字混排的例子。这种情况下,如果不进行额外控制,图片和文字是没有办法做到垂直居中的(图中上半部分)。下面给出的代码主要通过设置span的vertical-align来实现垂直居中的效果(图中下半部分)。<!-- 图片和文字没有垂直居中的效果 --> <div style="border:1px solid #000000;margin-bottom: 2px;width: 160px;"> <span style="font-size:18px;">Degree:</span> <img src="../img/cbar1.jpg"/> <span style="font-size:12px;">2.37</span> <img src="../img/info.png"/> </div> <!-- 图片和文字垂直居中 --> <div style="border:1px solid #000000;width: 160px;"> <!-- 1. 首先需要设定span的vertical-align: middle --> <!-- 2. 然后可以通过padding-bottom之类的调整文字的位置,并最终和图片垂直居中 --> <span style="vertical-align: middle;padding-bottom: 12px; font-size:18px;">Degree:</span> <img src="../img/cbar1.jpg"/> <span style="vertical-align: middle;padding-bottom: 10px; font-size:12px;">2.37</span> <img src="../img/info.png"/> </div>
相关文章推荐
- css实现文字图片垂直居中效果
- 51 css 图片文字同时垂直居中 z-index无效 父级元素塌陷 图片宽度自适应
- div图片水平垂直居中不随滚动条滚动的CSS代码(兼容IE8+)
- CSS让同一行的图片和文字垂直居中对齐
- CSS - 实现图片垂直居中,文字垂直居中
- 爱分享 css控制图片垂直水平居中支持IE6、IE7、IE8、FF等…
- 用CSS如何实现单行图片与文字垂直居中
- 利用css将文字和图片水平垂直居中显示
- CSS多行文字垂直居中的两种方法
- 小技巧:用CSS如何实现单行图片与文字垂直居中
- CSS实现同一行的图片和文字垂直居中对齐的方法
- 纯css实现文字及图片水平垂直居中
- CSS实现文字或图片等元素垂直、水平、绝对定位居中技术
- css 总结 【垂直居中】【图片下方文字】
- 小技巧:用CSS如何实现单行图片与文字垂直居中
- 【CSS】单行图片与文字垂直居中
- CSS大小不固定的图片和多行文字的垂直水平居中
- css控制div中图片垂直居中
- css 图片和文字同时垂直居中
- CSS-同一个li下,图片和文字一起,如何使得全部垂直居中