html 如何让文本垂直居中?让一段文字在整个页面里上下左右都居中

html-css09

html 如何让文本垂直居中?让一段文字在整个页面里上下左右都居中,第1张

1、首先我们打开自己的电脑,找到已经安装好的Dreamweaver,新建一个html页面,并保存到桌面上。

2、然后我们在html的编辑窗口,编辑元素,使其中显示若干文字,我是用的div标签进行布局显示的。

3、其在浏览器中的显示效果如下图所示,我们可以很清晰的看到,文字明显的靠上靠左对齐。

4、接下来我们就需要为文字元素添加一定的对齐方式,首先我们让其居中对齐,即使用text-align:center

5、使用之后在浏览器中进行效果查看,可以很清楚的看到,文字相对于之前靠右对齐了。

6、我们可以从上一个图中看到,文字在垂直方向上还是不对齐的,接下来我们就需要为文字添加垂直对齐样式,line-height,我们需要将这一样式的大小设为文字外层元素的高度大小,这样便可正好垂直居中对齐了。

7、接下来我们刷新浏览器中的页面,查看效果,现在的文字已是垂直水平均居中的状态。

注意事项:line-height的值和height的值要相等。

div中的文字水平居中:text-align:center;即可。

div中的文字垂直居中:line-height:值。值等于div的高度。

示例:<html><body><div style="width:200pxheight:100pxborder:1px solid redtext-

align:centerline-height:100px">居中对齐</div></body></html>。

html中让表格在浏览器中左右居中,可以设置表格的align属性

align有三个属性:

1、居中:center;

2、靠左:left;

3、靠右:right。

html中是没办法实现上下居中的,如果设置上下居中,需要通过js程序来设置。

左右居中代码如下:

<!DOCTYPE html PUBLIC "-//W3C//<a href="https://www.baidu.com/s?wd=DTD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">DTD</a>XHTML 1.0 <a href="https://www.baidu.com/s?wd=Tr&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">Tr</a>ansitional//EN" "http://www.w3.org/<a href="https://www.baidu.com/s?wd=TR&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">TR</a>/xhtml1/<a href="https://www.baidu.com/s?wd=DTD&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">DTD</a>/xhtml1-<a href="https://www.baidu.com/s?wd=tr&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">tr</a>ansitional.<a href="https://www.baidu.com/s?wd=dtd&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9mWwWuWR4rHbzmyDYnjbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En1R4PH0LnjTv" target="_blank" class="baidu-highlight">dtd</a>">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<table width="400" height="400" border="1" align="center">

<tr align="center" valign="middle">

<td>居中</td>

<td>居中</td>

<td>居中</td>

</tr>

<tr align="center" valign="middle">

<td>居中</td>

<td>居中</td>

<td>居中</td>

</tr>

</table>

</body>

</html>