使用CSS将字体居中可以使用HTML中的 <center> 标签，简单方便。
具体介绍CSS中Center标签定义、其使用方法及相关内容：
对浏览器支持：所有浏览器都支持 <center> 标签。
定义和用法：对其所包括的文本进行水平居中。
标准属性：id, class, title, style, dir, lang, xml:lang。
事件属性：onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup。
HTML 与 XHTML 之间的差异：
A、在 HTML 401 中，center 元素不被赞成使用。
B、在 XHTML 10 Strict DTD 中，center 元素不被支持。
Center标签实现字体居中案例：
<table width="400" border="0"><tr>
<td><center>表格内容1</center></td>
<td>表格内容2</td>
<td><center>表格内容3</center></td>
</tr>
<tr>
<td>表格内容4</td>
<td><center>表格内容5</center></td>
<td>表格内容6</td>
</tr>
<tr>
<td><center>表格内容7</center></td>
<td>表格内容8</td>
<td><center>表格内容9</center></td>
</tr>
</table>
Center标签实现字体居中案例效果：
附，另一种实现方法：
td{ text-align:center;}
<td align="center" valign="middle">
前一个是水平居中 后一个是垂直居中
对应的css写法:
<td style="text-align:center;vertical-align:middle;">
提示和注释：请使 CSS 样式来居中文本！
哪里有水平线。。。。。。
-------------------------------
1在你的table外面加一个<div style="text-align:center"></div>
也就是在你的<body>里面加上这个东西
2修改你的style定义把table的text-align值改为left
<style type="text/css">
<!--
table {
margin:0 auto;
text-align: left;
}
-->
</style>
完整的代码是
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格布局08 812</title>
<style type="text/css">
<!--
table {
margin:0 auto;
text-align: left;
}
-->
</style>
</head>
<body>
<div style="text-align:center "><table width="767" height="122" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="180"><p> </p>
<p> </p></td>
<td width="584" valign="top"><table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td height="103"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="767" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="765"><hr></td>
</tr>
</table>
<table width="767" height="328" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="180" valign="top"><p> </p>
</td>
<td width="584" valign="top"><p> </p></td>
</tr>
</table>
<table width="765" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="763"> </td>
</tr>
</table></div>
<p> </p>
</body>
</html>
你要在table里面写代码就写<table align="center">,如果在样式表，就是CSS里面就写
<style>
table tr td{
text-align:center;//水平居中
line-height: 25px;//行高
vertical-align:middle；//垂直居中
}
</style>
忘了问你是要让表格居中还是表格的内容居中，内容居中就用上面的代码，表格居中就在body里加margin:0 auto;text-align:center;就可以了
a 标签本身默认类似 css中display: inline, 即：内联元素，没有回车符。
这时，任何对a元素的配置，均无法让a标签内的文字居中对齐。只能影响 a标签整体对齐。
了解a标签的默认状态后，就很容易去用css修改它：
<a href="#" style="display: block; text-align: center;">测试</a>
显然，这时候标签内容居中了，但是，a标签占了整行内容。
如果期望仍与以前一样并不独占一行，可以修改它，让它显示为行内块元素：既符合内联元素特点，又符合块元素特点。
前面 <a href="#" style="display: inline-block; text-align: center; background: red; width: 100px;">测试</a> 后面
这里最好设置宽度，否则，和默认的情况是差不多的（当然，也可以设置padding-left 和padding-right， 甚至是height等等）。
有时候，IE较低的版本对inline-block支持度不够好。虽然非必要，但，在css中可以添加：
display: inline-block; text-align: center; background: red; width: 100px; _display: inline; zoom: 1;
display前加下划线为非标准css，IE可以识别它，其他符合W3C标准的浏览器会忽略这个设置。因此，通常情况下，也可以利用这个办法来精细的分别为不同的浏览器在同一css中进行区别设置。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）