如何讓文字處于盒子正中心啊
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
? ? width:100px;
? ? height:100px;
? ? padding:10px;
? ? border:1px solid red;
? ? text-align:center;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
</body>
</html>
2016-03-08
有時(shí)候，我們會(huì)想讓文字在某個(gè)盒子中垂直居中，這個(gè)時(shí)候我們可以使用line-height屬性?？梢越o文字外面加個(gè)span標(biāo)簽，然后給span添加line-height屬性，值為外面盒子的高度，line-height是行高，即文字相對(duì)于這個(gè)高度垂直居中。如果有背景圖或者小icon一般加在span標(biāo)簽上。
例如:
<div class="outer">
????< span>測(cè)試的文字</span>
</div>
.outer {
???height:100px;
}
.outer span {
???line-height:100px;
}
這樣文字就能在這個(gè)高100px的盒子中居中了。有時(shí)候可能會(huì)需要對(duì)span設(shè)置display:inline-block，不行的時(shí)候可以試一下
2016-03-08
最簡(jiǎn)單方法：
父元素高度確定的單行文本的豎直居中的方法是通過(guò)設(shè)置父元素的?height?和?line-height?高度一致來(lái)實(shí)現(xiàn)的。
#box1{ ????width:100px; ????height:100px; ????line-height:100px; ????padding:10px; ????border:1px?solid?red; ????text-align:center; }2016-03-08
?text-align:center;
是水平居中對(duì)齊
正確代碼，參考：
http://www.w3school.com.cn/cssref/pr_box-align.asp
http://www.w3school.com.cn/tiy/t.asp?f=css3_box-pack
<!DOCTYPE?HTML> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> <title>填充</title> <style?type="text/css"> #box1{ ????width:100px; ????height:100px; ????padding:10px; ????border:1px?solid?red; ????/*?Firefox?*/ display:-moz-box; -moz-box-pack:center; -moz-box-align:center; /*?Safari,?Chrome,?and?Opera?*/ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; /*?W3C?*/ display:box; box-pack:center; box-align:center; } </style> </head> <body> <div?id="box1">盒子1</div> </body> </html>