Html 为什么不'；我的div不是水平对齐的吗？

我试图水平对齐较大的

div

中的三个

div

，以下是我的代码：

#创建者{
文本对齐：居中；
}
.创作者姓名{
宽度：22%；
利润率：1%1%；
}

关于我们
正文

工作
正文

创造者
名称
正文

名称
正文

名称
正文

尝试在

creator\u name

.creator_name {
    width: 22%;
    margin: 1% 1%;
    display: inline-block;
}

---

您可以使用

显示：内联块与
垂直对齐耦合：顶部和
左边距：-4px以对齐大div中的div


#创建者{
文本对齐：居中；
}
.创作者姓名{
宽度：30.33%；
显示：内联块；
垂直对齐：顶部；
/*
*用来对抗分区之间的空白
* https://css-tricks.com/fighting-the-space-between-inline-block-elements/
*/
左边距：-4px；
利润率：1%1%；
}

关于我们
正文

工作
正文

创造者
名称
正文

名称
正文

名称
正文

试试看。你的代码就快到了，只是需要更多的CSS。
h3{
文本对齐：居中；
}
#关于#工作{
背景：#7D26CD；
边缘底部：15px；
边界半径：5px；
颜色：#fff；
}
#创造者{
文本对齐：居中；
明确：两者皆有；
宽度：100%；
}
.创作者姓名{
宽度：31%；
利润率：1%1%；
浮动：左；
显示：内联块；
}
.重要部分{
浮动：左；
宽度：100%；
}

关于我们
正文

工作
正文

创造者
名称
正文

名称
正文

名称
正文

如果使用浮动，请记住清除浮动。执行此操作的简单方法是在父容器上使用overflow:auto：


#创建者{
文本对齐：居中；
溢出：自动；
}
.创作者姓名{
宽度：22%；
利润率：1%1%；
浮动：左；
背景：#EEE；
}

创造者
名称
正文

名称
正文

名称
正文

这是因为默认情况下，div是
display:block


#创建者{
文本对齐：居中；
}
.创作者姓名{
宽度：22%；
利润率：1%1%；
显示：内联块；
}

关于我们
正文

工作
正文

创造者
名称
正文

名称
正文

名称
正文

将
显示：内联块
添加到您的
.creator\u name
规则中。这将阻止
divs
自动占用整个宽度，并且不允许在同一行上使用任何其他元素。下面是一个示例：。
我不明白为什么不使用float:left，我已经用float:left和work做了相同的示例。
看：
html

<div id="content">
        <div id="tree">
            <ul id="ulroot">
            </ul>
        </div>
        <div id="file">
            <ul id="ulfile"></ul>
        </div>  
            <div id="detail"></div> </div>

我看到你系在中间，将它们对齐。使用css flex

将所有3个div放入包装器div中。然后给出包装器div
display:flex；证明内容：中心CSS属性


.wrapper{display:flex；justify content:center；}
.内部{背景：#f2f5f6；边距：0 1em 0；边框：实心1px#ffcc00；填充：.25em；}

一个
两个
三
更新
很抱歉，免费帐户必须有限制。无论如何，我把演示放在了一个片段中

看起来我第一次演示的速度太快了，并且做了一个与你想要的不同的布局，我的错。这是一个基于第一个布局的布局，基本上是我制作的
#siteNav
flex
列

列布局


@charset“utf-8”；
/*核心CSS*/
html{
框大小：边框框；
字体：40016px/1.45“源代码Pro”；
}
*,
*：之前，
*：之后{
框大小：继承；
保证金：0；
填充：0；
边界：0；
大纲：无；
}
身体{
背景：#121；
颜色：#FEF；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
位置：相对位置；
宽度：100vw；
高度：100vh；
}
#站点导航{
显示器：flex；
柔性流动：柱状nowrap；
宽度：100%；
}
#创造者{
文本对齐：居中；
}
.创作者姓名{
宽度：31%；
显示：内联块；
}
.重要部分{
显示：表格单元格；
文本对齐：居中；
}
#关于,，
#工作,，
#创造者{
宽度：100%；
}

关于我们
正文

工作
正文

创造者
名称
正文

名称
正文

名称
正文

这不好吗？你想把它们显示在水平线上吗？谢谢大家！你们回答得太快了@FilpFloop很抱歉，这个演示现在是一个片段。谢谢你的文章，它非常有用。没问题，我注意到你没有接受这个答案，这不是你想要的吗？如果您在找什么，请随时告诉我。：）哦，好的，谢谢@FlipFloop如果您还有任何问题，请告诉我。：）
#content{
height: 600px;
width: 100%;
border: 2px solid #c0c0c0;
background-color: #80FF80;
display:block}

#tree{
float:left;
height: 100%;
min-height:100%;
width: 30%; }
#file{
float:left;
height: 100%;
width: 30%;}
#detail{
float:left;
height: 100%;
min-height:100%;
width: 40%;}