两种CSS控制：fieldset垂直滚动和图片文字垂直居中

最新推荐文章于 2023-11-15 09:33:41 发布

慢游

最新推荐文章于 2023-11-15 09:33:41 发布

阅读量6.7k

点赞数 1

分类专栏： HCI&UI&UE CSS

本文链接：https://blog.csdn.net/eengel/article/details/24359477

版权

本文介绍了如何使用CSS使fieldset在内容过多时不自动延长高度，而是显示垂直滚动条，以及如何实现图片和文字的垂直居中布局。通过设置fieldset样式和span的vertical-align属性，达到理想的布局效果。

摘要由CSDN通过智能技术生成

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>&l