您当前的位置:首页 > 网站建设笔记 >

垂直居中多行文字

0

居中单行文字基本上大家都使用行高(line-height)来处理,当然也可以使用padding来处理,不过使用line-height更方便控制单行的高度,而对于多行文字的话,行高就不适合了,在没有定义高度的情况下,可以使用padding来控制,例如:

.valign {
	border: 2px solid #444;
	padding: 30px 0;
}

效果如下所示:

网站程序网,提供高品质网站模板,助您低成本、高效率建设网站。提供手机网站模板、响应式网站模板、营销型网站模板,支持网站整站数据下载,同时解答网站建设常见问题,让任何一个网络推广人员、SEO优化人员、美工设计师、网站运营人员、网站程序员及广大网站爱好者学习者都能轻松找到和应用理想的网站模板。

当然大家一定不会满足这种未知高度的垂直居中。对于有定义高度的,非IE6和IE7的,只要把它的display属性定义为table-cell就可以简单解决,没错,用表格的属性。效果如下所示:

.valign {
	height: 160px;
	display: table-cell;
	vertical-align: middle;
	border: 2px solid #444;
}
网站程序网,提供高品质网站模板,助您低成本、高效率建设网站。提供手机网站模板、响应式网站模板、营销型网站模板,支持网站整站数据下载,同时解答网站建设常见问题,让任何一个网络推广人员、SEO优化人员、美工设计师、网站运营人员、网站程序员及广大网站爱好者学习者都能轻松找到和应用理想的网站模板。

注意,当display是table-cell时,边框是算在width里面的。

建站咨询

在线咨询真诚为您提供专业解答服务

咨询热线

137 1731 25507×24小时服务热线

微信交流

二维码终于等到你,还好我没放弃
返回顶部