一直使用原始的html标签内加入“align="center"”（居中）实现。
一、对body加CSS居中样式
<!DOCTYPE html>
<html>
<head> <meta charset="gb2312" />
<title>divcss5之居中实例</title>
<style> body{text-align:center}
</style>
</head> <body> 我会被居中 </body> </html>
二、对文字外层对象加css居中样式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gb2312" />
<title>divcss5之居中实例</title>
<style>
.divcss5{text-align:center}
</style>
</head>
<body>
<div class="divcss5">我会被居中</div>
<div class="divcss5"><img src="divcss5-logo-201305.gif" /></div>
</body>
</html>
三、之间对文字外层对象加align="center"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gb2312" />
<title>html align居中</title>
</head>
<body>
<div align="center">我会居中的</div>
<table width="100%">
<tr>
<td align="center">表格中居中</td>
</tr>
</table>
</body>
</html>
此方法是以前较为常见的方法，直接在html标签内使用align="center"
即可实现对象内图片或文字内容实现居中。
1.需要两个小小的图片，分别用来填充背景与分隔条。
2.编写html代码，用ul、li列表。下面是原代码：（包含效果图）
3.然后开始CSS部分。首先：加背景；其次：将竖直列表变成水平，用float:left就可以实现。相应的CSS代码如下（附效果图）：
4.最后美化一下，给a标签左右2em的间距，同时加上竖线背景（mainNavBorder.jpg）,并弄上:hover时的变化（这里只是让颜色变化） 在上面的CSS基础上，添加如下代码：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）