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

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

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

来源：15-6 水平居中总结-不定宽块状元素方法（二）

风到这里就是粘

2017-06-09 13:50

<!DOCTYPE HTML>

<html>

<head>

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

<style>

div{

border:1px solid red;

display:inline;

text-align:center;

}

</style>

</head>

<body>

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

</body>

</html>

写回答关注

2回答

慕九州0524670

2017-06-09 16:08:30

已采纳

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

1 1

little...

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

2017-07-02 21:13:56

共 1 条回复 >

GLeon: 2017-06-09 16:02:59

<!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>

1 0

GLeon

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

2017-06-09 16:04:10

共 1 条回复 >

初识HTML(5)+CSS(3)

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

1231843 学习 · 19087 问题

查看课程

相似问题

为什么text-align:center可以使div文本居中

回答 2