文字居中问题

最新推荐文章于 2025-07-22 00:16:16 发布

转载最新推荐文章于 2025-07-22 00:16:16 发布 · 70 阅读

文章标签：

#xhtml

最近有很多人问盒模型文字居中的问题，这么样让盒模型跟表格一样能垂直居中，为什么没有垂直居中属性，我向告诉初学这首先要抛弃表格的思想，盒模型跟表格是不一样的，如果一样的话那直接用表格好了。

下面我讲一下和模型文字居中的方法

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字居中</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
body {
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin:100px;
}
div#a{
    width:300px;
    height:100px;
    line-height:100px;            /*文字垂直居中，配合height使用，和高度数值设置成一样垂直居中了*/
    background:#ccc;
    text-align:center;            /*文字水平居中*/
    margin-bottom:20px;
}
div#b{
    width:300px;
/*padding内间距实现水平和垂直居中，当然也可以配合text-align:center;使用，比如我们给文字padding：10px 20px；这样文字就水平和垂直居中了*/
/*padding两个值的时候,第一个用于上－下，第二个用于左－右*/
    padding:44px 0;
    background:#ccc;
    text-align:center;            /*文字水平居中*/
}
</style>
</head>
<body>
<div id="a">my name is adam1985</div>
<div id="b">my name is adam1985</div>
</body>
</html>

关注博主即可阅读全文