css如何让table里的字居中?

css如何让table里的字居中?下面本篇文章就来给大家介绍一下使用CSS让table里字居中的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

在CSS中,可以通过设置text-align: center;vertical-align:middle;来让table里的字水平居中和垂直居中。

text-align属性

text-align属性指定元素文本的水平对齐方式。

属性值:

  • left:把文本排列到左边。默认值:由浏览器决定。

  • right:把文本排列到右边。

  • center:把文本排列到中间。

  • justify:实现两端对齐文本效果。

vertical-align属性

vertical-align属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

属性值:

  • baseline:默认。元素放置在父元素的基线上。

  • sub:垂直对齐文本的下标。

  • super:垂直对齐文本的上标

  • top:把元素的顶端与行中最高元素的顶端对齐

  • text-top:把元素的顶端与父元素字体的顶端对齐

  • middle:把此元素放置在父元素的中部。

  • bottom:把元素的底端与行中最低的元素的顶端对齐。

  • text-bottom:把元素的底端与父元素字体的底端对齐。

  • length

  • ��使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			table,td {
				text-align: center;
				vertical-align:middle;
				border-style: solid
			}
		</style>
	</head>
	<body>
		<table style="width:200px;height:200px">
			<tr>
				<td>11</td>
				<td>22</td>
			</tr>
			<tr>
				<td>22</td>
				<td>44</td>
			</tr>
			<tr>
				<td>33</td>
				<td>66</td>
			</tr>
		</table>
	</body>
</html>

效果图:

更多前端开发知识,请查阅 HTML中文网 !!

以上就是css如何让table里的字居中?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读