                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

display:inline;将div变为行内元素，又使用text-align:center;对div的文本居中，为什么出不来效果

<!DOCTYPE HTML>

<html>

<head>

<title>了不起的盖茨比</title>

<style>

div{

border:1px solid red;

display:inline;

text-align:center;

}

</style>

</head>

<body>

<div>我想要在父容器中水平居中显示。</div>

</body>

</html>

风到这里就是粘

2017-06-09

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

关注问题我要回答

4538

操作

收起

2 回答

慕九州0524670 回答被采纳 +3 积分
2017-06-09

把text-align:center;设置为body的样式就可以

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

收起回答

little_cow

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。重要的是最后一句话。行内元素，要实现居中，只能给它的父亲设置 text-align:center

2017-07-02 回复有任何疑惑可以回复我~

GLeon
2017-06-09

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
  div{
    width:500px;
    border:1px solid red;
    display:inline-block;
    text-align:center;
}
</style>
</head>
<body>
  <div>我想要在父容器中水平居中显示。</div>
</body>
</html>

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

收起回答

GLeon

内联元素本来就无法设置效果，改为display:inline-block;内联块状元素才能设置效果。

2017-06-09 回复有任何疑惑可以回复我~