我正在对仪表板进行编程，以显示我公司正在进行的元素的属性。这些属性稍后将从 API 中提取，但我目前正在从 JSON 文件中解析它们。
我的目标是这样的:
每组面板水平居中。我试图实现我的目标，但我无法将面板组居中。当我尝试使用包装器 div 和 text-align: center 将面板居中时，这是我收到的结果:
这是我的 HTML/Python 代码:
{{response.files.append(URL('static','DashboardLayout.css'))}}
{{include 'web2py_ajax.html'}}
<meta http-equiv="refresh" content="60">
<body>
{{projectIndex=0}}
{{while projectIndex < len(JsonInfo):}}
<div class = "projectName">Makin' Food</div>
{{environmentIndex = 0}}
<div class = "panel-wrapper">
{{while environmentIndex < len(JsonInfo[projectIndex].Environments):}}
<div class = "panel panel-default">
<li class = "subProjectName">Flippin' Meat</li>
<li>Started @ 5:30PM</li>
<li class = "difBack">Finished @ 6:00 PM</li>
<li class = "difBack url">Project Code: 54</li>
<li class = "build">Subproject Code: 178</li>
<a href = https://www.google.com/search?q=how+to+flip+burgers class = "siteUrl"}></a>
<li>Branch: Memphis</li>
</div>
{{environmentIndex+=1}}
{{pass}}
</div>
{{projectIndex+=1}}
{{pass}}
</body>
这是我用来创建使 div 居中的损坏垃圾尝试的 CSS:
html{
font-family: Arial, Helvetica, sans-serif;
}
body{
background-color: black;
}
.projectName{
font-size: 20pt;
font-weight: italic;
font-family: "Franklin Gothic" , Serif;
margin-left: 60px;
color: white;
clear: both;
text-align: left;
}
.panel-wrapper{
text-align: center;
}
.panel{
color:#E3E3ED;
text-align: center;
background-color:#148214;
width: 350px;
height: 300px;
border: 1px solid #828282;
display: inline-block;
}
.panel.failed{
background-color: #CF0000;
}
.panel.disabled{
background-color: #505050;
}
.subProjectName{
font-size: 20pt;
font-weight: bold;
color: black;
background-color: silver;
}
li{
font-size: 16pt;
text-align: center;
list-style-type: none;
margin: 5px 0px;
}
.difBack{
background-color: black;
margin: 0px;
}
a{
color:#E3E3ED;
text-decoration: none;
}
a:hover {
color: #1975FF;
text-decoration: underline;
}
.siteUrl:hover{
color: #0033CC;
}
.build{
font-size: 13pt;
}
span{
color:silver;
}
如您所见，我已经在我的包装器 div 中尝试了 text-align: center。我也曾尝试在包装 div 和包装 div 上使用 margin: 0 auto，但这也是无效的。
任何和所有帮助将不胜感激。谢谢!
编辑:生成的 HTML 已被删除，因为它不是理解 CSS 问题不可或缺的部分。
最佳答案
水平对齐是正确的，但垂直对齐是错误的。根据我的经验，这可以通过明确指定垂直对齐来解决。这可以通过如下更新 CSS 来完成:
.panel{
vertical-align: top;
/* ... */
}
这将确保每个面板都按预期对齐。
关于html - Web2Py 居中 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31860636/