html DIV+CSS让文字垂直居中

最新推荐文章于 2024-01-18 14:48:58 发布

林夕_______

最新推荐文章于 2024-01-18 14:48:58 发布

阅读量767

点赞数

分类专栏： Css 文章标签：文字垂直居中

本文链接：https://blog.csdn.net/jinyt_/article/details/77648043

版权

Css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

一、单行垂直居中

p { height:30px; line-height:30px; width:100px; overflow:hidden; } { height:30px; line-height:30px; width:100px; overflow:hidden; }

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

二、box方法实现水平垂直居中（有一定的兼容性问题）

<div class="center"> <div class="text"> <p>我是多行文字</p> <p>我是多行文字</p> <p>我是多行文字</p> </div> </div>div class="center"> <div class="text"> <p>我是多行文字</p> <p>我是多行文字</p> <p>我是多行文字</p> </div> </div>

.center {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background:#000;
  color:#fff;
  margin: 20px auto;


  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
} {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background:#000;
  color:#fff;
  margin: 20px auto;


  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

注意：display:table-cell;存在火狐浏览器兼容性问题，不建议使用。
可以用position进行处理：
例子：
<style>
	table,td{
		border: 1px solid #ddd;
	}
	.td-description {
	    height: 37px;
	    width: 750px;
	    /*父元素定位*/
	    position: relative;
	}
	.duty-description {
	    overflow: hidden;
		/*子元素绝对定位*/
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    width: 100%;
	    max-height: 37px;
	}
	</style>
	<body>
	<table>
		<tr>
			<td>
				<div class="td-description">
		            <div class="duty-description" >
		                机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育，加强保密检查。机关单位实行保密工作责任制，主要是实行党政领导干部保密工作责任制。 　　1、各级党政领导干部必须自觉接受保密监督，模范遵守保密法律、法规和下列保密守则： 　　⑴不泄露党和国家秘密。 　　⑵不在无保密保障的场所阅办、存放密级文件、资料。 　　⑶不擅自或指使他人复制、摘抄、销毁或私自留存带有密级的文件、资料。确因工作需要复印的，经请示上级有关部门同意后，方可复印，复印件按同等密级文件管理。 　　⑷不在非保密笔记本或未采取保密措施的电子信息设备中记录、传输和储存党和国家秘密事项。 　　⑸不携带密级文件、资料进入公共场所或进行社交活动，特殊情况下由本人或指定专人严格保管。 　　⑹不准用无保密措施的通信设施和普通邮政传送党和国家秘密。 　　
		            </div>
		        </div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="td-description">
		            <div class="duty-description" >
		                机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育
		            </div>
		        </div>
			</td>
		</tr>
	</table>

	table,td{
		border: 1px solid #ddd;
	}
	.td-description {
	    height: 37px;
	    width: 750px;
	    /*父元素定位*/
	    position: relative;
	}
	.duty-description {
	    overflow: hidden;
		/*子元素绝对定位*/
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    width: 100%;
	    max-height: 37px;
	}
	</style>
	<body>
	<table>
		<tr>
			<td>
				<div class="td-description">
		            <div class="duty-description" >
		                机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育，加强保密检查。机关单位实行保密工作责任制，主要是实行党政领导干部保密工作责任制。 　　1、各级党政领导干部必须自觉接受保密监督，模范遵守保密法律、法规和下列保密守则： 　　⑴不泄露党和国家秘密。 　　⑵不在无保密保障的场所阅办、存放密级文件、资料。 　　⑶不擅自或指使他人复制、摘抄、销毁或私自留存带有密级的文件、资料。确因工作需要复印的，经请示上级有关部门同意后，方可复印，复印件按同等密级文件管理。 　　⑷不在非保密笔记本或未采取保密措施的电子信息设备中记录、传输和储存党和国家秘密事项。 　　⑸不携带密级文件、资料进入公共场所或进行社交活动，特殊情况下由本人或指定专人严格保管。 　　⑹不准用无保密措施的通信设施和普通邮政传送党和国家秘密。 　　
		            </div>
		        </div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="td-description">
		            <div class="duty-description" >
		                机关、单位应当实行保密工作责任制，健全保密管理制度，完善保密防护措施，开展保密宣传教育
		            </div>
		        </div>
			</td>
		</tr>
	</table>

林夕_______

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html DIV+CSS让文字垂直居中

CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。一、单行垂直居中p { he...
复制链接

扫一扫

专栏目录