如何让文字处于盒子正中心啊-慕课网

首页课程实战体系课手记专栏慕课教程

如何让文字处于盒子正中心啊

来源：12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距（填充）

Zz张浩

2016-03-08 16:50

<!DOCTYPE HTML>

<html>

<head>

#box1{

width:100px;

height:100px;

padding:10px;

border:1px solid red;

text-align:center;

}

</style>

</head>

<body>

</body>

</html>

写回答关注

3回答

Raven0323

2016-03-08 17:00:26

已采纳

有时候，我们会想让文字在某个盒子中垂直居中，这个时候我们可以使用line-height属性。可以给文字外面加个span标签，然后给span添加line-height属性，值为外面盒子的高度，line-height是行高，即文字相对于这个高度垂直居中。如果有背景图或者小icon一般加在span标签上。
例如:
<div class="outer">
    < span>测试的文字</span>
</div>
.outer {
   height:100px;
}
.outer span {
   line-height:100px;
}
这样文字就能在这个高100px的盒子中居中了。有时候可能会需要对span设置display:inline-block，不行的时候可以试一下

1 2

Zz张浩

enen 我是设置的 span的margin-top实现了

2016-03-08 17:02:45

共 1 条回复 >
慕的地7558195

2016-03-08 19:17:46
最简单方法：
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
```
#box1{
    width:100px;
    height:100px;
    line-height:100px;
    padding:10px;
    border:1px solid red;
    text-align:center;
}
```
0 3

慕的地7558195: 2016-03-08 18:59:37

text-align:center;

是水平居中对齐

正确代码，参考：

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>

0 1

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225813 学习 · 18234 问题

查看课程

相似问题

如何使得盒子1位于边界的中心啊

回答 5

如何在盒子中居中

回答 5

回答 3

回答 1

回答 3