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

请问我是对块状元素的父元素设置了text-align:center,为何也可以实现块状元素的内容居中

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
div{
    border:1px solid red;
}
.nav{
    text-align:center;
}
</style>
</head>
<body>
<div class="nav">
<p>我是定宽块状元素,我要水平居中显示。</p>
</div>
</body>
</html>


正在回答

4 回答

text-align是让块状元素里的内容对齐的方式(这些内容一般为:内联元素、文本)。居中/左/右对齐。你设置DIV的text-align:center; 里面的内容自然对齐了。

margin: 0 auto;  一般是用于块状元素自己本身相对于父元素居中。

1 回复 有任何疑惑可以回复我~

你可以给div设置一个background-color看一下  这样就很明显了   只是文本居中 并不是div居中

0 回复 有任何疑惑可以回复我~

我觉得是你设置了对 div 这个标签元素居中,但 div 的宽度是和 父元素 body 100%等宽的,所有没能显示出来居中属性,而 p 标签继承了 居中 属性,所以 p 标签中的文字也 居中 显示了。

要显示出 div 的居中属性,上一节课里说到可以设置 div 的宽度,从来显示出 div 的居中属性。

0 回复 有任何疑惑可以回复我~

SS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。

http://www.imooc.com/code/2038

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

RadishWarrior 提问者

这样是实现p的子元素文本的居中,而不是p也居中?
2016-05-11 回复 有任何疑惑可以回复我~
#2

qq_yEs先生_53591812 回复 RadishWarrior 提问者

这是文本居中
2016-07-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

请问我是对块状元素的父元素设置了text-align:center,为何也可以实现块状元素的内容居中

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