为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

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

我只想问下元素内容到底指的是哪部分？如何让盒子里这三个字显示到中间？

我只想问下，所谓的内容到底指的是哪一部分？如何让盒子1这三个字到中间？

Michael_Extremist

2016-10-22

源自：初识HTML(5)+CSS(3)-升级版  12-12

关注问题 我要回答
1024
操作
收起

正在回答

6 回答

慕粉3673019 回答被采纳 +3 积分
2016-10-22

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>填充</title>

<style type="text/css">

#box1{

width:100px;

height:100px;

background: red;

text-align: center;  //text-align只能文本设置水平居中

display: table-cell;  //和下一句一起用，设置垂直居中。  display有好多种值，可以查一下css手册

vertical-align: middle;//设置垂直居中   不知道这个属性可以查一下手册 

}

</style>

</head>

<body>

<div id="box1">盒子1</div>

</body>

</html>

块元素里内容的垂直居中方法，还可以里面嵌套一个div，然后定位。还有别的，再搜搜吧，我也在学。


0 回复 有任何疑惑可以回复我~
收起回答
#1

Michael_Extremist 提问者

非常感谢！
2016-10-22 回复 有任何疑惑可以回复我~
qq_生如夏花_qq
2016-12-08

#box1{

    width:100px;

    text-align:center;

    height:100px;

    line-height:100px;

    border:1px solid red;background-color:pink;

}

这样就可以了，水平垂直都在中间

0 回复 有任何疑惑可以回复我~
收起回答
老王__
2016-10-25

内容的大小由width和height决定

0 回复 有任何疑惑可以回复我~
收起回答
酌酒与裴迪
2016-10-22

选择器是#box1，所以是定义整个盒子模型的，你需要再来一发div{text–align:center;}

1 回复 有任何疑惑可以回复我~
收起回答
小宇你别闹
2016-10-22

我也刚学 最中间的部分 教学的时候不是有个视频么 你好好看看  有个图 最中间的部分 就是内容 其他都是边框啥的

0 回复 有任何疑惑可以回复我~
收起回答
慕仰6018264
2016-10-22

内容就是你写的东西，呈现在网页上的文字 图片等

盒子里三个子显示到中间需要设置css样式  text-align:center;



0 回复 有任何疑惑可以回复我~
收起回答
#1

Michael_Extremist 提问者

text-align:center;这个样式不能让字显示到正中间
2016-10-22 回复 有任何疑惑可以回复我~
#2

慕仰6018264 回复 Michael_Extremist 提问者

可以把代码发过来吗？
2016-10-22 回复 有任何疑惑可以回复我~
#3

Michael_Extremist 提问者 回复 慕仰6018264

<!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; border:1px solid red; padding:10px; } </style> </head> <body> <div id="box1">盒子1</div> </body> </html>
2016-10-22 回复 有任何疑惑可以回复我~
#4

慕仰6018264

<style type="text/css"> p{ text-align:center; } </style> <div id="box1"><p>盒子1</p></div> 需要对“盒子1”这三个字再加一个标签，我用的p标签，设置p的样式
2016-10-22 回复 有任何疑惑可以回复我~
#5

qq_生如夏花_qq 回复 Michael_Extremist 提问者

#box1{ width:100px; text-align:center; height:100px; line-height:100px; border:1px solid red;background-color:pink; }这样就可以了水平垂直都在中间
2016-12-08 回复 有任何疑惑可以回复我~
查看2条回复

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1226810    人
  • 解答问题       18245    个

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

进入课程

本课相似问答

2 回答如何让三个子元素平均分宽度

3 回答第一代子元素到底是指什么？

6 回答这里的文字为什么不是显示在盒子中间

2 回答这个例子中哪里来的行内元素？

3 回答把内联元素转为块元素之后怎么让里面的内容上下左右居中显示
搜索更多本课相关问答

我只想问下元素内容到底指的是哪部分？如何让盒子里这三个字显示到中间？

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信